运动框架（三）starMove(obj,attr,iTarget)
程序员文章站
2022-03-02 09:37:24
...
此运动框架支持多物体可变属性运动，支持透明度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="div1"></div>
<input type="text" id="screen"/>
<script src="js/index.js"></script>
</body>
</html>
.div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
opacity: 0.3;
}
#screen{
float: left;
}
var oDiv=document.getElementsByClassName("div1")[0];
var view=document.getElementById("screen");
oDiv.onmouseover=function ()
{
starMove(this,"height",400);
}
oDiv.onmouseout=function ()
{
starMove(this,"height",100);
}
//多物体任意属性框架
function starMove(obj,attr,iTarget)
{
clearInterval(obj.timer)
obj.timer=setInterval(function(){
//获取当前样式值
if(attr=="opacity")
{
var cur =getStyle(obj,attr)*100;
}
else
{
var cur = parseInt(getStyle(obj,attr));
}
var speed=(iTarget-cur)/4;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(Math.abs(iTarget-cur)<=4)
{
clearInterval(obj.timer);
if(attr=="opacity")
{
obj.style[attr]=iTarget/100;
}
else
{
obj.style[attr]=iTarget+"px";
}
}
else
{
if(attr=="opacity")
{
obj.style[attr]=((cur+speed)/10)/10.0;
}
else
{
obj.style[attr]=cur+speed+"px";
}
}
view.value= obj.style[attr];
},30);
}
//获取样式
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.current[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
上一篇： js设计模式第一章 读书笔记