您的位置：首页 > Web前端 > JavaScript

js完美运动框架，想得到的效果基本能做到

2014-08-08 17:53 645 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>完美运动框架</title>
<style type="text/css">
div{width: 200px;height: 100px;filter:alpha(opacity=100);opacity: 1;background: #808800;}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
window.onload=function (){
var oDiv=document.getElementsByTagName('div')[0];
oDiv.onmouseover=function()
{
startMove(this,{width:400,height:200});
}
oDiv.onmouseout=function(){
startMove(this,{width:200,height:100});
}
}

function getCurrentStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,null)[name];
}
}

function startMove(obj,json,fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;

for(var attr in json)
{   var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getCurrentStyle(obj,attr))*100);
}
else{
cur=parseFloat(getCurrentStyle(obj,attr));
}

var speed=(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]) flag=false;
if(attr=='opacity'){
obj.style.filter="alpha(opacity:"+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+'px';
}
if(flag){
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
}
},30);
}
</script>
</body>
</html>

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

标签： javascript 完美运动框架

相关文章推荐

新的分享

章节导航