JavaScript之运动框架简单例子

来源：互联网发布：算法导论中文版答案编辑：程序博客网时间：2024/06/05 17:50

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 200px;
width: 200px;
background: yellow;
/*margin: 10px;
float: left;*/
/*border: 2px solid black;*/

filter: alpha(opacity:30);
opacity: 0.3;

}

</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.getElementById("div1");
oDiv1.onmouseover= function(){
moveStart(this,'opacity',100)
}
oDiv1.onmouseout= function(){
moveStart(this,'opacity',30)
}

}
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle.name;
} else{
return getComputedStyle(obj,false)[name];
}
}
function moveStart(obj,attr,iTarget){
clearInterval(obj.times);
obj.times = setInterval(function(){
var cur = null;
if(attr=='opacity'){
cur = parseFloat(getStyle(obj,attr))*100;
}else{
cur = parseInt(getStyle(obj,attr));
}
//var oDiv = document.getElementsByTagName("div");
var speed = (iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget==cur){
clearInterval(obj.times)
}else{
if(attr == 'opacity'){
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;

document.getElementById("txt").value = obj.style.opacity;
}else{
obj.style[attr] = cur +speed+"px";
}

}
},30)
}

</script>
<input type="text" id="txt" />
<div id="div1">高度</div>
</body>
</html>

阅读全文

0 0