-
存在多項共用一個值，并且這個值會發(fā)生改變時，最好單獨給賦值，避免出現(xiàn)爭用的情況。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 給每一個li設置一個timer，才不會致使他們去搶timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };查看全部
-
4-1 多物體運動 for循環(huán)來為每一個TagNameList[i]添加事件 并添加屬性來區(qū)分各自的定時器(用于取消) 為了防止定時器的共用問題，給每一個事件都定義一個定時器 利用參數(shù)中的this來指定所選擇的當前元素 多物體不要共用一個值,在對象上定義一個單獨的屬性保持值 <script> window.onload = function(){ var aLis = document.getElementsByTagName("li"); for(var i=0;i<aLis.length;i++){ aLis[i].timer = null; aLis[i].onmouseover = function(){ startMove(this,400); } aLis[i].onmouseout = function(){ startMove(this,200) } } } //var timer =null; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget - obj.offsetWidth)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); obj.style.width = obj.offsetWidth+speed+"px"; },30) } </script>查看全部
-
3-1 緩沖動畫 Math.floor()//向下取整 Math.ceil()//向上取整 遇到這種運動涉及到數(shù)字的問題都要做一個判斷，向上或者向下取整 // 從用兩個函數(shù)實現(xiàn)，到用一個函數(shù)：兩個有很多相同的部分，則相同部分可以共用，不同部分看有什么聯(lián)系 // 從傳入兩個參數(shù)到一個參數(shù)：參數(shù)傳遞盡可能的少 <script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = (offleft - oDiv.offsetLeft)/10; speed = speed > 0 ?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft == offleft ){ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); } </script>查看全部
-
2-2 透明度動畫 <style> *{margin:0px;padding:0px;} #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30);//透明度為30 opacity:30px; } </style> <script> 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.opacity = alpha/100;主流//基于IE oDiv.style.filter = 'alpha(opacity:'+alpha+')'; DOM元素.style.filter = 'alpha(opacity:' + alpha + ')'(非主流，IE8前) } },30) } </script> <body> <div id = "div1"></div> </body>查看全部
-
2-1：速度動畫： 為防止動畫累加，在每次觸發(fā)動畫事件時，應該先清除前一個沒有完成的動畫，即清除全部開啟的定時器，然后這次再開啟一個定時器。 offsetLeft值可以獲取當前的left值， 而offsetLeft屬性不能被賦值，只能獲取 window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft//itager 目標值){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > offleft ){ speed = -10; }else if(oDiv.offsetLeft < offleft) { speed = 10; }else{ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); }查看全部
-
1-1 課程介紹 JS動畫效果： 運動框架實現(xiàn)思路： 1.速度（改變值left,right,width,height,opacity) 2.緩沖運動 3.多物體運動 4.任意值變化 5.鏈式運動 6.同時運動查看全部
-
運動框架實現(xiàn)思路查看全部
-
jquery方法查看全部
-
【多物體運動】注意變量定義不要共用，寫在自己的for循環(huán)里。查看全部
-
offsetLeft與style.left的區(qū)別 offsetLeft 獲取的是相對于父對象的左邊距 left 獲取或設置相對于 具有定位屬性(position定義為relative)的父對象 的左邊距 如果父div的position定義為relative,子div的position定義為absolute，那么子div的style.left的值是相對于父div的值， 這同offsetLeft是相同的，區(qū)別在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是數(shù)值28，如果需要對取得的值進行計算， 還用offsetLeft比較方便。 2. style.left是讀寫的，offsetLeft是只讀的，所以要改變div的位置，只能修改style.left。 3. style.left的值需要事先定義，否則取到的值為空。而且必須要定義在html里，我做過試驗，如果定義在 css里，style.left的值仍然 為空，這就是我剛開始碰到的問題，總是取不到style.left的值。 offsetLeft則仍然能夠取到，無需事先定義div的位置。 serInterval(....)為創(chuàng)建一個定時器 clearInterval(...)為清除一個定時器查看全部
-
運動框架搭建思路圖查看全部
-
math.floor()//向下取整 math.ceil()//向上取整查看全部
-
jq fsngfa查看全部
-
多物體運動 for循環(huán)來為每一個TagNameList[i]添加事件 并添加屬性來區(qū)分各自的定時器(用于取消) 利用參數(shù)中的this來指定所選擇的當前元素 多物體不要共用一個值,在對象上定義一個單獨的屬性保持值查看全部
-
透明度動畫 屬性: filter: alpha(opacity:30) ; 通過變量alpha存儲元素透明度來與目標值判斷 DOM元素.style.filter = 'alpha(opacity:' + alpha + ')'(非主流，IE8前) DOM元素.style.opacity = alpha / 100(主流)查看全部
舉報
0/150
提交
取消