-
<script src="move.js"> function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, target,fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { //1.取當(dāng)前值 var icur = 0; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur = parseInt(getStyle(obj, attr)); } //2.算速度 var speed = (target - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //3.檢測停止 if (target == icur){ clearInterval(obj.timer); if(fn){ fn.call(obj); } } else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; } else{ obj.style[attr] = icur + speed + "px"; } } }, 30) } </script>查看全部
-
call方法: 語法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定義：調(diào)用一個(gè)對象的一個(gè)方法，以另一個(gè)對象替換當(dāng)前對象。 說明： call 方法可以用來代替另一個(gè)對象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。 如果沒有提供 thisObj 參數(shù)，那么 Global 對象被用作 thisObj。 鏈?zhǔn)絼赢嬈鋵?shí)就是在原來的基礎(chǔ)上多傳一個(gè)參數(shù)，作為回調(diào)函數(shù)，確認(rèn)一個(gè)變化執(zhí)行完以后就執(zhí)行該函數(shù)。嵌套函數(shù)。查看全部
-
解決startMove(obj,attr,iTarget)函數(shù)的兩個(gè)bug： 1、當(dāng)attr為opacity時(shí)，parseInt獲取值可能永遠(yuǎn)為0；因此代碼修改為： if(attr == "opacity"){ icur = Math.round(parseFloat(getStyle(obj,attr)) * 100; } else{ icur = parseInt(getStyle(obj,attr), 10); } 2、當(dāng)attr為opacity或其他非px單位的屬性時(shí)，obj.style[attr]顯示值單位異常；因此代碼修改為： if(attr == "opacity"){ obj.style.filter = "filter:alpha(opacity:" + (icur + speed) + ")"; obj.style.opacity = (icur + speed) / 100; } else{ obj.style[attr] = icur + speed + "px"; } 注意： 1、計(jì)算機(jī)不能精確處理浮點(diǎn)數(shù)，因此浮點(diǎn)數(shù)一般不用來做比較或一些精確度要求較高的計(jì)算；因此此處的parseFloat值還要用Math.round四舍五入一下。 2、parseInt的第二個(gè)參數(shù)（表示進(jìn)制）最好寫上。如果第一個(gè)參數(shù)是字符串，那么parseInt會將"0x"開頭的string當(dāng)做16進(jìn)制數(shù)、將"0"開頭的string當(dāng)做8進(jìn)制數(shù)。 3、parseInt和parseFloat要求string的第一個(gè)字符必須為數(shù)字，否則返回NaN；parseInt會將string中的第一個(gè)非數(shù)字字符及其后的字符全部丟棄，而parseFloat會將string中的第一個(gè)非數(shù)字字符（除了第一個(gè)點(diǎn)號及點(diǎn)號后緊跟的數(shù)字）及其后的字符全部丟棄。 4、當(dāng)+運(yùn)算的一邊為字符串時(shí)，會優(yōu)先執(zhí)行字符串連接操作，因此有數(shù)學(xué)運(yùn)算時(shí)最好用括號包含或用另一個(gè)變量表示。查看全部
-
<script> window.onload = function() { var li1 = document.getElementById('li1'); var li2 = document.getElementById('li2'); var li3 = document.getElementById('li3'); li1.onmouseover = function() { startMove(this, 'height', 400); } li1.onmouseout = function() { startMove(this, 'height', 100); } li2.onmouseover = function() { startMove(this, 'width', 400); } li2.onmouseout = function() { startMove(this, 'width', 200); } } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var icur = parseInt(getStyle(obj, attr)); var speed = (target - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (target == icur) clearInterval(obj.timer); else obj.style[attr] = icur + speed + "px"; }, 30) } </script>查看全部
-
offsetxxx屬性值包含：元素長或?qū)?邊框+內(nèi)間距等等 當(dāng)屬性增多時(shí)offset就會出現(xiàn)問題，為了解決這些問題就用getStyle函數(shù)來代替offset查看全部
-
1.offsetWidth屬性可以返回對象的padding+border+width屬性值之和，style.width返回值就是定義的width屬性值。 2.offsetWidth屬性僅是可讀屬性，而style.width是可讀寫的。 3.offsetWidth屬性返回值是整數(shù)，而style.width的返回值是字符串。 4.style.width僅能返回以style方式定義的內(nèi)部樣式表的width屬性值。 clientWidth是對象看到的寬度（含padding，不含border） offsetWidth是指對象自身的寬度（含padding，含border） scrollWidth是對象實(shí)際內(nèi)容的寬度（含padding，含border，含滾動條） JS中 obj.style.attr 只能獲取行內(nèi)樣式 要獲取非行內(nèi)樣式要通過obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法獲取 可以封裝為 function getStyle(obj,attr){ //currentStyle針對IE瀏覽器； if(obj.currentStyle){ return bj.currentStyle[attr]; }else{ //getComputedStyle 針對Firefox瀏覽器 return getComputedStyle(obj,false)[attr] } } obj.offsetWidth 返回值是數(shù)值所以不用parseInt（）；而obj.style.width獲取的是像素值 （當(dāng)給div增加邊框值時(shí)，且寬度在內(nèi)聯(lián)樣式里設(shè)置，js中obj.offsetWidth返回值中包括有邊框，所以會導(dǎo)致js程序中數(shù)值的判斷有誤。當(dāng)把寬度設(shè)置到行內(nèi)樣式時(shí)，上述的現(xiàn)象則沒有。）查看全部
-
<script type="text/javascript"> window.onload = function() { var aLi = document.getElementsByTagName('li'); var aDiv = document.getElementsByTagName('div'); for (var i = 0; i < aLi.length; i++) { aLi[i].timer = null; aLi[i].onmouseover = function() { startMove1(this, 400); } aLi[i].onmouseout = function() { startMove1(this, 200); } } for (var i = 0; i < aDiv.length; i++) { aDiv[i].timer = null; aDiv[i].alpha = 30; aDiv[i].onmouseover = function() { startMove2(this, 100); } aDiv[i].onmouseout = function() { startMove2(this, 30); } } } </script>查看全部
-
function startMove1(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var speed = (target - obj.offsetWidth) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (target == obj.offsetWidth) clearInterval(obj.timer); else obj.style.width = obj.offsetWidth + speed + "px"; }, 30) } function startMove2(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var speed = 0; if (obj.alpha > target) speed = -10; else if (obj.alpha < target) speed = 10; if (obj.alpha == target) clearInterval(obj.timer); else { obj.alpha += speed; obj.style.filter = 'alpha(opacity:' + obj.alpha + ')'; obj.style.opacity = obj.alpha / 100; } }, 30) }查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> * { margin: 0; padding: 0; } ul, li { list-style: none; } ul li { width: 200px; height: 100px; background: yellow; margin-bottom: 20px; } div { width: 200px; height: 200px; background: red; margin: 10px; float: left; filter: alpha(opacity : 30); opacity: 0.3; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>查看全部
-
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function() { startMove(-200); } } var timer = null; function startMove(target) { clearInterval(timer); var oDiv = document.getElementById("div1"); var speed = 0; timer = setInterval(function() { speed=(target-oDiv.offsetLeft)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (oDiv.offsetLeft == target) clearInterval(timer); else { oDiv.style.left = oDiv.offsetLeft + speed + "px"; } }, 30) } </script>查看全部
-
緩沖運(yùn)動中：向上取整Math.ceil(),向下取整Math.floor() 由于數(shù)值設(shè)置的原因，div移動到一定px后，進(jìn)行相減再除20的運(yùn)算后會出現(xiàn)小數(shù)，比如0.75，比如這時(shí)div移動到了290，程序里寫到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,此時(shí)speed速度為0.75。而瀏覽器是不允許出現(xiàn)小數(shù)的，會把0.75去掉，那么就速度為0 不動了。那么div的left就變成了290，下次執(zhí)行時(shí)div的left是290，算出來速度還是0.75，瀏覽器又省略了小數(shù)，結(jié)果就是div停在了290px，到不了目標(biāo)點(diǎn)300。 所以 向右移動 速度為正 就將變成小數(shù)的速度 向上取整 為1 向左移動 速度為負(fù) 就將變成負(fù)小數(shù)的速度向下取整 取整原因：因?yàn)橛谐?，?dāng)offsetLeft值變的越來越小時(shí)，最后相除會使speed變成小數(shù)，從而offsetLeft與speed相加會有小數(shù)，又因顯示器的最小像素單位是1px，所以瀏覽器默認(rèn)向下取整（變小，即floor），將小數(shù)省略，小數(shù)省略后，最終的值會變小，從而導(dǎo)致程序無法進(jìn)入if判斷，進(jìn)入死循環(huán)。 這一點(diǎn)可以用console.log(speed)可以驗(yàn)證，speed的log會一直輸出，因?yàn)槌绦蛩姥h(huán)了 Math.floor()向取整； Math.ceil()向上取整； Math.round()四舍五入； var speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果(目標(biāo)值-當(dāng)前值)/10 不能整除的話。運(yùn)動到最后，是1~9之間的數(shù)字來除以10，結(jié)果是個(gè)小于1的小數(shù)，如果用Math.floor(speed)向下取整，那就是0，speed=0，意味著不再發(fā)生變化。也就是說，當(dāng)速度大于0的時(shí)候，如果用Math.floor(speed),最后不到10個(gè)像素的時(shí)候，就不會動了。所以要用Math.ceil向上取整。同理，當(dāng)速度<0時(shí)，要用Math.ceil()取整。查看全部
-
<!-- 使用js實(shí)現(xiàn)透明度運(yùn)動而不采用直接設(shè)置css的style.opacity屬性來改變透明度,這是因?yàn)閏ss的透明度的設(shè)置是一步到位，瞬時(shí)完成的，而使用js可以實(shí)現(xiàn)漸隱特效 --> opacity是不透明度，opacity為0時(shí)表示不透明度是0也就是完全透明(效果等同于css的隱藏) filter: alpha(opacity:30); /*IE瀏覽器專用，opacity屬性值為0~100*/ opacity:0.3; /*所有主流瀏覽器都支持opacity屬性。 <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(100); } oDiv.onmouseout = function() { startMove(30); } } var alpha = 30; var timer = null; function startMove(target) { var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function() { var speed = 0; if (alpha > target) { speed = -10; } else if (alpha < target) { speed = 10; } if (alpha == target) { clearInterval(timer); } else { alpha += speed; oDiv.style.filter = 'alpha(opacity' + alpha + ')'; oDiv.style.opacity = alpha / 100; } }, 30) } </script>查看全部
-
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function() { startMove(-200); } } var timer = null; function startMove(target) { clearInterval(timer);//清除計(jì)時(shí)器 var oDiv = document.getElementById("div1"); var speed = 0; timer = setInterval(function() { if (oDiv.offsetLeft < target) { speed = 1; } else if (oDiv.offsetLeft > target) { speed = -1; } if (oDiv.offsetLeft == target) clearInterval(timer);//當(dāng)面板移動到目標(biāo)位置時(shí)結(jié)束計(jì)時(shí)器 else { oDiv.style.left = oDiv.offsetLeft + speed + "px"; } }, 30) } </script>查看全部
-
1.速度（改變值Left、right、width、height、opacity） 2.緩沖運(yùn)動 3.多物體運(yùn)動 4.任意值變化 5.鏈?zhǔn)竭\(yùn)動 （如：先寬后高） 6.同時(shí)運(yùn)動 （如：寬高同時(shí)運(yùn)動）查看全部
-
<script type="text/javascript"> $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){ $(this).css('top','30px'); $(this).animate({top:"20px",opacity:"1"},200); }) }) }) </script>查看全部
舉報(bào)
0/150
提交
取消