老师,为什么无法实现链式运动?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" /> < title >多物体运动</ title > < style type = "text/css" > *{margin: 0;padding: 0;} li{list-style:none;width: 200px;height: 100px;background: black;margin-bottom: 20px;border: 1px solid #f00; filter: alpha(opacity:30);opacity: 0.3;} </ style > < script type = "text/javascript" > window.onload=function(){ var li=document.getElementsByTagName('li'); for(var i=0;i< li.length ;i++){ li[i] .timer = null ; li[i] .onmouseover = function (){ startMove(this,{width:400,height:200},function(){ startMove(this,{opacity:100}); }); } li[i] .onmouseout = function (){ startMove(this,{width:200,height:100,opacity:30}); } } function getStyle (obj,attr){ return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval (function(){ var iFlag = true ;//假设所有运动都到达目标 for(var attr in json){ //1.取当前值 var icur = 0 ; attr=='opacity'? icur = Math .round(parseFloat(getStyle(obj,attr))*100) : icur = parseInt (getStyle(obj,attr)); //2.计算速度 var speed=(json[attr]-icur)/10; speed =speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur!=json[attr]){ iFlag=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(iFlag){ clearInterval(obj.timer); fn && fn(); } },30) } } </ script > </ head > < body > < ul > < li ></ li > < li ></ li > < li ></ li > </ ul > </ body > </ html > |
而且还报错了?不加链式运动的时候一切正常啊
25
收起
正在回答 回答被采纳积分+1
3回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧