-
overflow:hidden;//防止溢出 text-decoration:none;//去除li的小黑dian display:inline-block;//內(nèi)聯(lián)塊 位置變化，原點-向上移動-固定中間位置-向上運動回到原點查看全部
-
window.load = function(){ var oMove = document.getElementById("move"); var aList = document.getElementByTagName("a"); for(var i=0;i<aList.length;i++){ aList.onmouseover = function(){ var _this = this.getElementByTagName("i")[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.top = 30 + "px"; startMove(_this,{top:20,opacity:100}); }); } } }查看全部
-
function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true;//標志所有運動是否到達目標值-----必須放在計時器里面(才能滿足判斷所有運動是否到達目標值) for(var attr in json) { var curr = 0; if(attr == 'opacity') { curr = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { curr = parseInt(getStyle(obj, attr)); } //移動速度處理 var speed = 0; speed = (json[attr] - curr) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(curr != json[attr]) { flag = false; } if(attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (curr + speed) + ")"; obj.style.opacity = (curr + speed) / 100; } else { obj.style[attr] = curr + speed + 'px'; } } if(flag) { //alert('ok'); clearInterval(obj.timer); if(fn) { fu(); } } }, 30); } function getStyle(obj, attr) { if(obj.currentStyle) { //IE取樣式 return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }查看全部
-
同時執(zhí)行兩個定時器函數(shù)，后一個函數(shù)執(zhí)行時會清除前一個函數(shù)的定時器， 所以實際效果是只執(zhí)行后一個函數(shù)查看全部
-
function getStyle(obj.attr){ if(obj.currentStyle){ //currentStyle針對IE瀏覽器； return obj.currentStyle[attr];} else{return getComputedStyle(obj,flase)[attr];}} //getComputedStyle 針對Firefox瀏覽器查看全部
-
function getStyle(obj.attr){ if(obj.currentStyle){ //currentStyle針對IE瀏覽器； return obj.currentStyle[attr];} else{return getComputedStyle(obj,flase)[attr];}} //getComputedStyle 針對Firefox瀏覽器查看全部
-
JS中 obj.style.attr 只能獲取行內(nèi)樣式 要獲取非行內(nèi)樣式要通過obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法獲取 可以封裝為function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];}else{returngetComputedStyle(obj,false)[attr]}} obj.offsetWidth 返回值是數(shù)值所以不用parseInt（）；而obj.style.width獲取的是像素值查看全部
-
for循環(huán)，為沒一個li都綁定一個onmouseover事件查看全部
-
避免重復多次啟動計時器，可以在啟動計時器前先清空計時器，這樣就不會有重復的計時器使用了。查看全部
-
運動模式： 1. 速度 => 改變left、right、width、height、opacity 2. 緩沖運動 3. 多物體運動 4. 任意值變化 5. 鏈式運動 6. 同時運動查看全部
-
Math.round();四舍五入取整查看全部
-
obj.timer=setInterval(function() 設(shè)置定時器的同時給obj.timer賦值了。 全局增加timer=null，定義一個變量，每次執(zhí)行前變量為空值應(yīng)該也能起到清除定時器的作用查看全部
-
由于數(shù)值設(shè)置的原因，div移動到一定px后，進行相減再除20的運算后會出現(xiàn)小數(shù)，比如0.75，比如這時div移動到了290，程序里寫到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而瀏覽器是不允許出現(xiàn)小數(shù)的，會把0.75去掉，那么div的left就成了290，下次執(zhí)行時div的left是290，算出來速度還是0.75，瀏覽器又省略了小數(shù)，結(jié)果就是div停在了290px，到不了目標點300。查看全部
-
currentStyle getComputeStyle查看全部
-
function getStyle(obj.attr){ if(obj.currentStyle){ //currentStyle針對IE瀏覽器； return obj.currentStyle[attr];} else{return getComputedStyle(obj,flase)[attr];}} //getComputedStyle 針對Firefox瀏覽器查看全部
舉報
0/150
提交
取消