码迷,mamicode.com
首页 > 其他好文 > 详细

完美运动框架

时间:2015-07-10 18:18:46      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:


<html>
<head>
<meta charset="utf-8">
<style>
#div1 {
width:200px;
height:200px;
background:#ff0
}
</style>
<script>
//让多个值同时变化
//jason传n个改变样式


//获取样式
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
//运动
function starMove(obj,json,fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var bStop=true; //假设所有运动都到位置了
//获取当前值
for(var attr in json)
{

var iCur=0;
if(attr=="opacity")
{
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}
else
{
iCur=parseInt(getStyle(obj,attr));
}
//计算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//检测所有的运动到达制定
//检测所有的运动到达指定位置停止
if(iCur!=json[attr])
{
bStop=false;
}
if(attr=="opacity")
{
obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+"px";
}
}
if(bStop)
{
clearInterval(obj.timer);
}
if(fn)
{
fn();
}
}
,30)
}
window.onload=function(){
var div=document.getElementById("div1");
div.onmouseover=function(){
starMove(div,{width:600,height:600});
};
div.onmouseout=function()
{
starMove(div,{width:200,height:200});
};

}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

完美运动框架

标签:

原文地址:http://www.cnblogs.com/AliceX-J/p/4636193.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!