使用js编写一个简单的运动框架
Posted 萧萧烦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用js编写一个简单的运动框架相关的知识，希望对你有一定的参考价值。
下班后，，没事捣鼓捣鼓个人的小爱好。
首先，说明我的这个运动框架(css所有属性)也是常见的框架一种，健壮性并不是太好，对于新手学习倒是挺好，，若是大神，老司机请拐弯。
上来，我们先定义一个区块，然后在关联一个可以实时看到属性值发生变化值的标签。
html：
<body>
<div id = "div1">
</div>
<input type = "text" id = "txt1">
</input>
</body>
css：
#div1{
width:200px;
height:200px;
position:absolute;
top:200px;
left:0px;
background-color:yellow;
opacity:0.3;
filter:alpha(opacity:30);
}
js：
首先，我们先写页面加载函数，因为我不是把函数直接绑定到元素上面的方式
//编写加载函数
window.onload = function(){
var oDiv = document.getElementById(\'div1\');
//对标签进行鼠标上移事件绑定
oDiv.onmouseover = function(){
startMove(this , \'opacity\',100);
};
//对标签进行鼠标离开事件绑定
oDiv.onmouseout = function(){
startMove(this, \'opacity\',30);
};
};
//编写得到样式函数，因为我们需要对元素的css进行动画
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj, false)[attr];
};
};
//编写对标签元素进行控制的运动框架
function startMove(obj,attr,iTarget){
//上来先清除定时器，为什么自己可以试试看
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//先定义一个获取当前值的容器
var cur = 0;
//兼容透明度动画
if(attr == \'opacity\'){
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
cur = parseInt(getStyle(obj,attr));
}
//设置动画的步长
//让动画具有缓冲效果
var speed = (ITarget-cur)/6;
speed = speed>0?Math.ceil(apeed):Math.floor(speed);
//当动画需要的步长设置好，之后我们需要进一步判断我们的目标值，来进一步确认动画的开始和结束
if(cur == iTarget){
//如果到达了目标值，那么我们就清除动画，释放这个定时器，解放内存
clearInterval(obj.timer);
}
else{
//如果没有达到我们的目标值，那么我们需要这个动画一直持续下去，在这个动画的变化中，需要对透明度单独判断
if(attr == \'opacity\'){
obj.style.opacity = (cur+speed)/100;
ob.style.filter = \'alpha(opacity:\'+(cur+speed)+\')\';
document.getElementById(\'txt1\').value = obj.style.opacity;
}
else{
obj.style[attr] = cur+speed+\'px\';
document.getElementById(\'txt1\').value = obj.style.opacity;
}
}
},30);
}
以上是关于使用js编写一个简单的运动框架的主要内容，如果未能解决你的问题，请参考以下文章