<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{margin:0;padding:0} ul li{list-style:none;} ul li{width:200px;height:50px;margin: 20px 0; background:yellow; filter: alpha:(opacity:30);opacity: 0.3;} </style> <script type="text/javascript"> window.onload=function(){ var x=document.getElementsByTagName("li"); for (var i = 0; i < x.length; i++) { x[i].timer=null; x[i].onmouseover=function(){ startMove(this,"width",100,function(){ startMove(this,"height",500) }); } x[i].onmouseout=function(){ startMove(this,"height",50,function(){ startMove(this,"width",200); }); } } } function getStyle(obj,attr){ if (obj.currentStyle) {return obj.currentStyle[attr];} else{return getComputedStyle(obj,false)[attr];} } function startMove(obj,attr,zd,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var sxz=0; if (attr=="opacity") { var sxz=Math.round(parseFloat(getStyle(obj,attr))*100); } else{ var sxz=parseInt(getStyle(obj,attr)); } var speed=(zd-sxz)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (sxz==zd) { clearInterval(obj.timer); if (fn) {fn()}; } else{ if (attr=="opacity") { var alpha1=sxz+speed; obj.style.filter="opacity:( alpha:alpha1)"; obj.style.opacity=alpha1/100; } else { obj.style[attr]=sxz+speed+"px"; } } },30) } </script></head><body><ul> <li></li> <li></li> <li></li></ul></body></html>
2 回答
已采纳
ruibin
TA贡献358条经验 获得超213个赞
你的问题不是出在链式操作，而是出在第18和23行。你这个this的指向问题，由于this在内层函数里面，而内层函数又是一个全局函数，所以此时的this指向window。要让程序正常运行，只需要在18行修改下代码代码var self = this;
startMove(self,"width",100,function(){}，在23行修改一下代码var self = this;
startMove(self,"height",50,function(){}。调整this的指向，那就ok了
添加回答
举报
0/150
提交
取消