您的位置：首页 > 其它

任意值运动框架

2013-03-18 16:31 134 查看

任意值运动框架思路：

1、任意值运动框架带有3个形参，第一个是obj对象，第二个是attr属性，第三个是iTarget对象运动的目标值。

2、清除当前对象的定时器 clearInterval(obj.timer)

3、设置定时器 obj.setInterval(function(){},30)

3.1、定义一个空的cur用来设置当前属性。

3.2、因为有时候是opacity透明度运动，所以就要用if else加一个判断

if(attr=='opacity'){
　　cur=Math.round(parseFloat(getStyle(obj,attr))*100);  //opacity要用parseFloat强制转换为浮点数才能起作用，因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug，会出现算不尽的数，所以要用Math.round()来四舍五入。
}
else{
　　cur=parseInt(getStyle(obj,attr));  //getStyle获取样式
}

3.3、定义速度 var speed=(iTarget-cur)/6;

3.4、用三目运算符把速度向上取整和向下取整 speed=speed>0?Math.ceil(speed):Math.floor(speed);

3.5、用if else判断，如果对象的属性值已经等于目标值就清除定时器 clearInterval(obj.timer)

3.5.1、如果属性名为opacity就设置opacity的值

3.51.2、否则就设置其它的宽高值运动速度。

任意值运动框架代码：

function startMove(obj,attr,iTarget)  //三个形参，第一个是对象obj，第二个是对象的属性名，第三个是对象运动的目标值
{
clearInterval(obj.timer);  //清除当前对象的定时器
obj.timer=setInterval(function(){  //定义当前对象的定时器
var cur=0;

if(attr=='opacity')  //如果attr属性是opacity时
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);  //opacity要用parseFloat强制转换为浮点数才能起作用，因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug，会出现算不尽的数，所以要用Math.round()来四舍五入。
}
else
{
cur=parseInt(getStyle(obj,attr));    //把从对象获取到的属性值强制转换为整形
}

var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);  //用三目运算符，当速度大于0就向上取整，否则就向下取整，这样能避免缓冲运动出现bug

if(cur==iTarget)
{
clearInterval(obj.timer);
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';  //IE
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
},30);
};

任意值运动框架应用实例完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>任意值运动框架</title>
<style>
div{margin:20px;}
#div{width:200px;height:200px;background:red;}
#div2{width:200px;height:200px;background:black;filter:alpha(opacity:30);opacity:0.3;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div');
var oDiv2=document.getElementById('div2');

oDiv.onmouseover=function()
{
startMove(this,'height',100)
};

oDiv.onmouseout=function()
{
startMove(this,'height',200)
};

oDiv2.onmouseover=function()
{
startMove(this,'opacity',100)
};

oDiv2.onmouseout=function()
{
startMove(this,'opacity',30)
};
};

function getStyle(obj,name)
{
if(obj.currentStyle){  //获取对象属性的值
return obj.currentStyle[name];
}
else{  //Chrome FireFox获取对象属性的值
return getComputedStyle(obj,false)[name];
}
};

function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);  //清除当前对象的定时器
obj.timer=setInterval(function(){  //定义当前对象的定时器
var cur=0;

if(attr=='opacity'){  //如果attr属性是opacity时
cur=Math.round(parseFloat(getStyle(obj,attr))*100);  //opacity要用parseFloat强制转换为浮点数才能起作用，因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug，会出现算不尽的数，所以要用Math.round()来四舍五入。
}
else{
cur=parseInt(getStyle(obj,attr));    //把从对象获取到的属性值强制转换为整形
}

var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);  //用三目运算符，当速度大于0就向上取整，否则就向下取整，这样能避免缓冲运动出现bug

if(cur==iTarget){
clearInterval(obj.timer);
}
else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(cur+speed)+')';  //IE
obj.style.opacity=(cur+speed)/100;

document.getElementById('txt1').value=obj.style.opacity;
}
else{
obj.style[attr]=cur+speed+'px';
}
}
},30);
};
</script>
</head>

<body>
<div id="div"></div>
<div id="div2"></div>
<input type="text" id="txt1" />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航