运动框架的回调函数不能达到设定的值
运动框架的回调函数不能达到设定的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>连接运动</title>
<style type="text/css">
li{height:100px;
width: 300px;
background: yellow;
margin:20px;
list-style: none;
filter:alpha(opacity:30);
opacity:0.3;
border:4px solid red}
</style>
<script type="text/javascript">
//运动框架
function startMove(obj,json,fn){
clearInterval(obj.timer);//清除上一个没有结束的运动，不会影响其他的
obj.timer = setInterval(function(){
for(var attr in json){
var flag = true;//来判断是不是所有运动都到达了终点
//假设所有运动都到了目标值
var getstyle = 0;
if(attr == 'opacity'){
getstyle =Math.round(parseFloat(getStyle(obj,attr))*100);
//因为计算机对小数的识别不好所以要四舍五入；
}else{
getstyle = parseInt(getStyle(obj,attr));
}
var speed = (json[attr]-getstyle)/10;//3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。
//加了border等css属性后offsetWidth就不能用了会有错误，所以用自己封装的getStyle函数获得css属性值
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(getstyle!=json[attr]){
flag = false;
}
if(attr =='opacity' ){
obj.style['opacity']= (getstyle+speed)/100;
obj.style['fliter']='alpha(opacity:'+(getstyle+speed)+')'
}else{
obj.style[attr]= getstyle+speed+"px";//2.offsetWidth属性仅是可读属性，而style.width是可读写的。
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//ie
}else{
return obj.getComputedStyle(obj,null)[attr];
}
}
window.onload = function(){
var oli = document.getElementsByTagName('li');
for(var i = 0 ;i<oli.length;i++){
oli[i].timer = null;
oli[i].onmouseover = function(){
var that = this;
startMove(that,{width:600,height:600,opacity:100},
function(){
startMove(that,{width:300,height:100,opacity:30});
});
}
oli[i].onmouseout = function(){
var that = this;
startMove(that,{width:400,height:400,opacity:50});
}
};
}
</script>
</head>
<body>
<ul>
<li id="li">利用json达到同时运动</li>
<li id="li">利用json达到同时运动</li>
<li id="li">利用json达到同时运动</li>
<li id="li">利用json达到同时运动</li>
</ul>
</body>
</html>
jetbbb1回答
-
李晓健
function getStyle(obj, attr) { console.log(obj.getComputedStyle); if (obj.currentStyle) { return obj.currentStyle[attr]; } else { //这行写借了 return getComputedStyle(obj, null)[attr]; } }看注释
随时随地看视频慕课网APP
相关分类
JavaScript