課程
/前端開發(fā)
/JavaScript
/JS動畫效果
為什么在DW中的設(shè)計視圖中能看到css樣式效果,但是谷歌和火狐瀏覽器就是沒有反應(yīng)呢?
2016-09-19
源自:JS動畫效果 2-1
正在回答
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>js動畫移入移出</title> <style?type="text/css"> body,div,span{ margin:?0; padding:?0; } #div1{ width:?200px; height:?200px; background-color:?#FFA8A9; position:?relative; left:?-200px; top:?0px; } #div1?span{ width:?20px; height:?50px; background-color:?#14EACF; position:?absolute; left:?200px; top:?75px; } </style> <script?type="text/javascript"> window.onload=function(){ var?oDiv=document.getElementById("div1"); //?鼠標(biāo)移入時間 oDiv.onmousemove=function(){ startMove(0); } //鼠標(biāo)移出時間 oDiv.onmouseout=function(){ startMove(-200); } } var?timer=null; function?startMove(target){ clearInterval(timer);//防止反復(fù)觸發(fā)定時器 var?oDiv=document.getElementById("div1"); timer=setInterval(function(){ var?speed=0; if?(oDiv.offsetLeft>target)?{ speed=-10; }else{ speed=10; } if(oDiv.offsetLeft==target){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+"px"; } },30) } </script> </head> <body> <div?id="div1"> <span?id="share">分享</span> </div> </body> </html>
名字都給你們起完了 提問者
第32行應(yīng)該是oonmouseover吧!@_@
span是行內(nèi)元素,沒有寬和高,自然你就看不到他,把span換成div問題迎刃而解!
請注意一下這個文檔聲明。應(yīng)該就是這個問題。
我的是這樣的~ <!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"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/> <title>透明度</title> <style?type="text/css"> *{?margin:0;?padding:0} #div1{?width:200px;?height:200px;?background:#FF9999;?filter:alpha(opacity:30);?opacity:03;} </style> <script?type="text/javascript"> window.onload=function(){ var?oDiv?=?document.getElementById("div1"); oDiv.onmouseover?=?function(){ startMove(100); } oDiv.onmouseout?=?function(){ startMove(30); } } var?timer?=?null; var?alpha?=?30; function?startMove(iTarget){ var?oDiv?=?document.getElementById("div1"); clearInterval(timer); timer?=?setInterval(function(){ var?speed?=?0; if(alpha?>?iTarget){ speed?=?-10; }else{ speed?=?10; } if(alpha?==?iTarget){ clearInterval(timer); }else{ alpha+=?speed; oDiv.style.filter?=?"alpha(opacity:'+alpha+')"; oDiv.style.opacity?=?alpha/100; } },30) } </script> </head> <body> <div?id="div1"></div> </body> </html>
tttct
名字都給你們起完了 提問者 回復(fù) tttct
tttct 回復(fù) 名字都給你們起完了 提問者
按夏至后是這樣子的
比如這樣
你按一下F12看看樣式什么的。elements和style
可能是瀏覽器不兼容的問題
舉報
通過本課程JS動畫的學(xué)習(xí),從簡單動畫開始,逐步深入各種動畫框架封裝
7 回答flag的 問題!??!求大神解釋
5 回答代碼如下,但IE沒有動畫效果,有大神可以解釋下嗎?
2 回答這里面的兩個變量icu和attr我有點混淆了,大神解釋下唄
1 回答求大神解答一下
2 回答問一下這個錯在哪?麻煩大神看下
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)微信公眾號
2016-09-19
2016-11-17
第32行應(yīng)該是oonmouseover吧!@_@
2016-09-26
span是行內(nèi)元素,沒有寬和高,自然你就看不到他,把span換成div問題迎刃而解!
2016-09-19
2016-09-19
2016-09-19
按夏至后是這樣子的
2016-09-19
2016-09-19
你按一下F12看看樣式什么的。elements和style
2016-09-19
可能是瀏覽器不兼容的問題
2016-09-19
可能是瀏覽器不兼容的問題