请慕友帮忙看看什么问题，出不来？
gzw2zy
2016-01-31 23:45
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>同时运动</title>
<style type="text/css">
ul{list-style: none;margin: 0;padding: 0;}
ul li{width: 200px;height: 100px;background: yellow;margin-bottom: 20px;border:4px solid #000;filter:alpha(opacity:30);opacity: 0.3;}
</style>
<script type="text/javascript">
window.onload=function(){
var oLi=document.getElementById('li1');
oLi.onmouseover=function(){
startMove(oLi,{width:201,height:200,opacity:100});
// startMove(oLi,'width',400);
// startMove(oLi,'height',200);
// 原来的运动框架不能满足同时运动的效果，要用到JSON
}
oLi.onmouseout=function(){
startMove(oLi,{width:200,height:100,opacity:30});
}
}
// startMove(obj,{attr1:iTarget1,attr2:iTarget2},fn)
function startMove(obj,json,fn){
var flag=true;//假设所有运动都到达目标值
clearInterval(obj.timer);//一开始要清除下定时器
obj.timer=setInterval(function(){//重新创建一个定时器
for(var attr in json){
//1.取当前的值
var icur=0;
if(attr == 'opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);//判断当前是不是透明度
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(json[attr]-icur)/8;//速度值等于目标值减去当前宽度再除一个数字
speed=speed>0?Math.ceil(speed):Math.floor(speed);//只要是缓冲运动都要判断
//3.检测停止
if(icur ！= json[attr]){//如果当前宽度等于目标值清除定时器
flag=false;
}
if(attr == 'opacity'){//等号之间的空格不能省
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr]=icur+speed+'px';//否则缓冲增加宽度
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
<!--<script type="text/javascript">
var json={a:12,b:13};
for(var i in json){
//alert(i);
alert(json[i]);
}
</script>-->
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>
2回答
-
- 大可忘却前尘事
- 2016-02-02 10:26:59
调用函数的时候没有参数fn
-
- gzw2zy
- 2016-02-02 23:27:37
看到了，谢谢
JS动画效果
113925 学习 · 1443 问题
相似问题