javascript实现的运动框架详解
javascript实现的运动框架详解:
所谓的运动框架简单的说就是让元素的某一个属性值能够有渐进性的变化。运动框架的使用在实际功能中有大量的应用，最常见的比如客服系统，当拖动滚动条的时候，一般客服系统能够以弹性方式跟随，下面就简单介绍一下如何实现此效果:
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
#mytest
{
width:100px;
height:100px;
background-color:black;
}
</style>
<script type="text/javascript">
function Move(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var cur=0;
if(attr=="opacity")
{
if('v' == '\v')
{
cur=parseInt(getStyle(obj,attr));
}
else
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
}
else
{
cur=parseInt(getStyle(obj,attr));
}
var speed=(iTarget-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(iTarget==cur)
{
clearInterval(obj.timer);
}
else
{
cur+=speed;
if(attr=="opacity")
{
obj.style.filter="alpha(opacity:"+cur+")"; //for IE
obj.style.opacity=cur/100; //for FF
}
else
{
obj.style[attr]=cur+"px";
}
}
},30);
}
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];//for IE
}
else
{
return getComputedStyle(obj,false)[name];//for FF
}
}
window.onload=function()
{
var mytest=document.getElementById("mytest");
Move(mytest,"width",200);
}
</script>
</head>
<body>
<div id="mytest">蚂蚁部落欢迎您</div>
</body>
</html>
在以上代码可以以缓冲的形式将div的宽度设置为200px。当然是用move函数几乎可以设置一个元素的任何属性。下面简单解释要一下如何实现此效果:
一.实现原理:
原来非常的简单，通过定时器函数setInterval()不断的调用一个函数以实现不间断的以不同的速度改变元素的属性值，最后达预定属性值。这样就实现了缓冲效果。
二.代码注释:
1.function Move(obj,attr,iTarget){}，声明一个函数，此函数实现了运动框架效果，此函数具有三个参数，obj是要操作的对象，attr表示要操作的属性值例如"width"，iTarget表示要达到的目标属性值。
2.clearInterval(obj.timer)，作用是关闭上一个上一个定时器，可以防止对对同一个元素同时使用多个定时器。
3.obj.timer=setInterval(function(){}，1000），定时器反复调用函数。
4.var cur=0,用来存储当前属性的值。
5.if(attr=="opacity"),判断要操作的属性是否是透明度。
6.if('v' == '\v'){}，由于IE8和IE8以下浏览器对透明度的处理和其他标准浏览器不一样，所以这里需要进行判断。
7. cur=Math.round(parseFloat(getStyle(obj,attr))*100)，针对在FF中opacity属性值为浮点数值问题，将属性值 四舍五入、转换成浮点型。乘以100，使opacity属性值与IE统一为百分数。
8.var speed=(iTarget-cur)/10,创建递减的速度speed变量。实现属性值的变速改变。
9.speed=speed>0?Math.ceil(speed):Math.floor(speed)，取整，解决浏览器忽略小于1px的数值 导致运动结束时，离目标值Itarget少几个像素的问题。
10.if(iTarget==cur){}如果达到指定属性值，就停止定时器。
11.cur+=speed，属性值递增。
12.if(attr=="opacity"){},透明度关于不同浏览器的兼容为。
13.function getStyle(obj,name){}，获取指定兑现的执行属性的属性值。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢