-
僅限于本例子 下面代碼更容易理解 但是老師的代碼是我們更應(yīng)該注意的 老師將2種效果用一個封裝的函數(shù)實現(xiàn) 日后老師的方法將更實用 我們開發(fā)時應(yīng)該首先考慮怎么讓IF內(nèi)的表達式相近 更利于此種方法實現(xiàn) function startMove(){ clearInterval(this.timer); var oDiv=document.getElementById('div1'); this.timer=setInterval(function(){ if(oDiv.offsetLeft<0){ oDiv.style.left = oDiv.offsetLeft+1+'px'; } },30); } function startReturn(){ clearInterval(this.timer); var oDiv=document.getElementById('div1'); this.timer=setInterval(function(){ if(oDiv.offsetLeft>-200){ oDiv.style.left = oDiv.offsetLeft-1+'px'; } },30); }查看全部
-
ddd查看全部
-
多物體運動查看全部
-
實現(xiàn)思路查看全部
-
緩沖運動查看全部
-
取整原因：因為有除法，當offsetLeft值變的越來越小時，最后相除會使speed變成小數(shù)，從而offsetLeft與speed相加會有小數(shù)，又因顯示器的最小像素單位是1px，所以瀏覽器默認向下取整（變小，即floor），將小數(shù)省略，小數(shù)省略后，最終的值會變小，從而導(dǎo)致程序無法進入if判斷，進入死循環(huán)。 這一點可以用console.log(speed)可以驗證，speed的log會一直輸出，因為程序死循環(huán)了 Math.floor()向取整； Math.ceil()向上取整； Math.round()四舍五入； var speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果(目標值-當前值)/10 不能整除的話。運動到最后，是1~9之間的數(shù)字來除以10，結(jié)果是個小于1的小數(shù)，如果用Math.floor(speed)向下取整，那就是0，speed=0，意味著不再發(fā)生變化。也就是說，當速度大于0的時候，如果用Math.floor(speed),最后不到10個像素的時候，就不會動了。所以要用Math.ceil向上取整。同理，當速度<0時，要用Math.ceil()取整。查看全部
-
<!-- 使用js實現(xiàn)透明度運動而不采用直接設(shè)置css的style.opacity屬性來改變透明度,這是因為css的透明度的設(shè)置是一步到位，瞬時完成的，而使用js可以實現(xiàn)漸隱特效 --> opacity是不透明度，opacity為0時表示不透明度是0也就是完全透明(效果等同于css的隱藏) filter: alpha(opacity:30); /*IE瀏覽器專用，opacity屬性值為0~100*/ opacity:0.3; /*所有主流瀏覽器都支持opacity屬性。. 注意：IE8和早期版本支持另一種過濾器屬性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity屬性值是0~1*/ 【沒有直接的屬性可以改變透明度，需要定義一個alpha】 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(opactiy:"+alpha+")";（IE） oDiv.style.opactiy = alpha/100;（火狐或chrome，它們的這個系數(shù)的滿值是100，這里需要的滿值是1） } },30) }查看全部
-
body,div{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } window.onload=function div1(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){ star(100); } div1.onmouseout=function(){ star(30); } } var timer=null; var alpha=30; function star(it){ var div1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>it){ speed=-10; } else{ speed=10; } if(alpha==it){ clearInterval(timer); } else{ alpha+=speed; div1.style.filter='alpha(opacity:+alpha+)'; div1.style.opacity=alpha/100; } },300); } <div id="div1"></div>查看全部
-
將鼠標滑過圖片移出： var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ //當鼠標滑過是執(zhí)行以下函數(shù) startMove(); } var timer = null; function startMove(){ /*clearInterval(timer); //這一步就是將所有定時器關(guān)閉，使圖片始終以設(shè)置的像素勻速移出*/ var oDiv = document.getElementById('div1'); timer = setInterval(function(){ //設(shè)置一個定時器 if (oDiv.offsetLeft == 0){ //判斷是否可以停止運動的條件 clearInterval(timer); //達到條件就將定時器任務(wù)停止 } else { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; //設(shè)置每毫秒向左平移10px } }， 30)查看全部
-
window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ //鼠標經(jīng)過時執(zhí)行 startMove(); } oDiv.onmouseout=function(){ //鼠標移開時執(zhí)行 startMove1(); } } var timer=null; function startMove(){ clearInterval(timer); //每次執(zhí)行前，清除定時器 var oDiv=document.getElementById("div1"); timer=setInterval(function(){ if(oDiv.offsetLeft==0){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+10+'px'; } },30); } function startMove1(){ clearInterval(timer); //每次執(zhí)行前，清除定時器 var oDiv=document.getElementById("div1"); timer=setInterval(function(){ if(oDiv.offsetLeft==-200){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft-10+'px'; } },30); } body,div,span{margin:0;padding:0;} #div1{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;} #div1 span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;} <div id="div1"><span id="share">分享</span></div>查看全部
-
運動模式： 1. 速度 => 改變left、right、width、height、opacity 2. 緩沖運動 3. 多物體運動 4. 任意值變化 5. 鏈式運動 6. 同時運動查看全部
-
<!DOCTYLE html> <html> <head> <meta charset="utf-8"> <title>JS移動動畫</title> <style type="text/css"> *{margin:0;padding:0;} #menu{width:200px;height:200px;background:lightblue;position:relative;left:-200px;top:0;} #btnx{width:30px;height:60px;background:green;position:absolute;left:100%;top:50%;margin-top:-30px;} </style> <script type="text/javascript"> window.onload = function(){ var menu = document.getElementById('menu'); menu.onmouseover = function(){ startMove(0); } menu.onmouseout = function(){ startMove(-200); } } var timer = null; function startMove(iTarget){ clearInterval(timer); var menu = document.getElementById('menu'); timer = setInterval(function(){ var speed = 0; if(menu.offsetLeft < iTarget){ speed = 10; }else{ speed = -10; } if(menu.offsetLeft == iTarget){ clearInterval(timer); }else{ menu.style.left = menu.offsetLeft + speed +'px'; } },25); } </script> </head> <body> <div id="menu"><div id="btnx"></div></div> </body> </html>查看全部
-
body,div{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } window.onload=function div1(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){ star(100); } div1.onmouseout=function(){ star(30); } } var timer=null; var alpha=30; function star(it){ var div1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>it){ speed=-10; } else{ speed=10; } if(alpha==it){ clearInterval(timer); } else{ alpha+=speed; div1.style.filter='alpha(opacity:+alpha+)'; div1.style.opacity=alpha/100; } },300); } <div id="div1"></div>查看全部
-
window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ //鼠標經(jīng)過時執(zhí)行 startMove(); } oDiv.onmouseout=function(){ //鼠標移開時執(zhí)行 startMove1(); } } var timer=null; function startMove(){ clearInterval(timer); //每次執(zhí)行前，清除定時器 var oDiv=document.getElementById("div1"); timer=setInterval(function(){ if(oDiv.offsetLeft==0){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft+10+'px'; } },30); } function startMove1(){ clearInterval(timer); //每次執(zhí)行前，清除定時器 var oDiv=document.getElementById("div1"); timer=setInterval(function(){ if(oDiv.offsetLeft==-200){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft-10+'px'; } },30); } body,div,span{margin:0;padding:0;} #div1{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;} #div1 span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;} <div id="div1"><span id="share">分享</span></div>查看全部
-
.filter="alpha(opacity:"+alpha+")" 前面兩個引號為一對，后面兩個引號為一對。用來傳給css用的filter.查看全部
舉報
0/150
提交
取消