課程
/前端開發(fā)
/JavaScript
/JS動畫效果
哪里錯了呀?
2015-10-22
源自：JS動畫效果 2-2
正在回答
那就可能是引用錯誤了
周末00 提問者
你把它放到瀏覽器里不就可以看報錯了
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"/> <title>多物體運動</title> <style?type="text/css"> *{ ????margin:?0; ????padding:?0;??????? } ul,li{ ????list-style:?none; } ul?li{ ????width:?200px; ????height:?100px; ????background:?red; ????margin-bottom:?20px; ????filter:alpha(opacity:30); ????opacity:?0.3; } </style> <script> window.onload?=?function(){ ????var?aLi?=?document.getElementsByTagName('li'); ????for(var?i?=?0;i?<?aLi.length;i++){ ????????aLi[i].timer?=?null; ????????aLi[i].alpha?=?30; ????????aLi[i].onmouseover?=?function(){ ????????????startMove(this,400); ????????????changeColor(this,100); ????????} ????????aLi[i].onmouseout?=?function(){ ????????????startMove(this,200); ????????????changeColor(this,30); ????????} ????} } function?startMove(obj,iTarget){ ????clearInterval(obj.timerSpeed); ????obj.timerSpeed?=?setInterval(function(){ ????????var?speed?=?(iTarget-obj.offsetWidth)/10; ????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed); ????????if(iTarget?==?obj.offsetWidth){ ????????????clearInterval(obj.timerSpeed); ????????} ????????else{ ????????????obj.style.width?=?obj.offsetWidth+speed+'px'; ????????} ????},30) } function?changeColor(obj,iTarget){ ????clearInterval(obj.timer); ????obj.timer?=?setInterval(function(){ ????????var?speed?=?(iTarget?-?obj.alpha)/10; ????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed); ????????if?(iTarget?==?obj.alpha)?{ ????????????clearInterval(obj.timer); ????????} ????????else{ ????????????obj.alpha+=speed; ????????????obj.style.filter?=?'alpha(opacity:'+obj.alpha+')'; ????????????obj.style.opacity?=?obj.alpha/100; ????????} ????},30) } </script> </head> <body> <ul> ????<li></li> ????<li></li> ????<li></li> </ul> </body> </html>
給你個例子。
舉報
通過本課程JS動畫的學(xué)習(xí)，從簡單動畫開始，逐步深入各種動畫框架封裝
3 回答看了又看還是沒發(fā)現(xiàn)哪里錯了，透明度沒反應(yīng)
3 回答改變透明度的代碼，代碼運行沒反應(yīng)
1 回答改變透明度
1 回答透明度動畫
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2015-10-22
那就可能是引用錯誤了
2015-10-22
你把它放到瀏覽器里不就可以看報錯了
2015-10-22
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8"/> <title>多物體運動</title> <style?type="text/css"> *{ ????margin:?0; ????padding:?0;??????? } ul,li{ ????list-style:?none; } ul?li{ ????width:?200px; ????height:?100px; ????background:?red; ????margin-bottom:?20px; ????filter:alpha(opacity:30); ????opacity:?0.3; } </style> <script> window.onload?=?function(){ ????var?aLi?=?document.getElementsByTagName('li'); ????for(var?i?=?0;i?<?aLi.length;i++){ ????????aLi[i].timer?=?null; ????????aLi[i].alpha?=?30; ????????aLi[i].onmouseover?=?function(){ ????????????startMove(this,400); ????????????changeColor(this,100); ????????} ????????aLi[i].onmouseout?=?function(){ ????????????startMove(this,200); ????????????changeColor(this,30); ????????} ????} } function?startMove(obj,iTarget){ ????clearInterval(obj.timerSpeed); ????obj.timerSpeed?=?setInterval(function(){ ????????var?speed?=?(iTarget-obj.offsetWidth)/10; ????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed); ????????if(iTarget?==?obj.offsetWidth){ ????????????clearInterval(obj.timerSpeed); ????????} ????????else{ ????????????obj.style.width?=?obj.offsetWidth+speed+'px'; ????????} ????},30) } function?changeColor(obj,iTarget){ ????clearInterval(obj.timer); ????obj.timer?=?setInterval(function(){ ????????var?speed?=?(iTarget?-?obj.alpha)/10; ????????speed?=?speed>0?Math.ceil(speed):Math.floor(speed); ????????if?(iTarget?==?obj.alpha)?{ ????????????clearInterval(obj.timer); ????????} ????????else{ ????????????obj.alpha+=speed; ????????????obj.style.filter?=?'alpha(opacity:'+obj.alpha+')'; ????????????obj.style.opacity?=?obj.alpha/100; ????????} ????},30) } </script> </head> <body> <ul> ????<li></li> ????<li></li> ????<li></li> </ul> </body> </html>給你個例子。