-
var timer = null; ? ? ? ?function startMove(iTarget) { ? ? ? ? ? ?clearInterval(timer); ? ? ? ? ? ?timer = setInterval(function(){ ? ? ? ? ? ? ? ?var speed = 0; ? ? ? ? ? ? ? ?var oDiv = document.getElementById("oDiv"); ? ? ? ? ? ? ? ?speed = (iTarget-oDiv.offsetLeft)/10; ? ? ? ? ? ? ? ?speed = speed>0?Math.ceil(speed):Math.floor(speed); ? ? ? ? ? ? ? ?if (oDiv.offsetLeft!=iTarget){ ? ? ? ? ? ? ? ? ? ?oDiv.style.left = oDiv.offsetLeft + speed +"px"; ? ? ? ? ? ? ? ?} ? ? ? ? ? ?},30) ? ? ? ?} ? ? ? ?window.onload = function() { ? ? ? ? ? ?var oDiv = document.getElementById("oDiv"); ? ? ? ? ? ?oDiv.onmouseover = function() { ? ? ? ? ? ? ? ?startMove(0); ? ? ? ? ? ?} ? ? ? ? ? ?oDiv.onmouseout = function () { ? ? ? ? ? ? ? ?startMove(-200); ? ? ? ? ? ?} ? ? ? ?}
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//速度如果沒有取整，會導致無法到達目標，一則占用資源
查看全部 -
offsetLeft：當前值
查看全部 -
運動框架實現(xiàn)思路查看全部
-
//做了驗證，在動畫完執(zhí)行后，定時器確實沒有被清除，flag沒起作用 function getStyle(obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } var alpha = 30; function startMove(objj,json,fn) { var flag = true; clearInterval(objj.timer); objj.timer = setInterval(function () { var icur = 0; for(var attr in json){ if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(objj,attr))*100); }else{ icur = parseInt(getStyle(objj,attr)); } var speed = (json[attr] - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(icur != json[attr]){ flag = false; } if (attr == 'opacity') { objj.style.filter = 'alpha(opacity:'+icur+speed+')'; objj.style.opacity = (icur+speed)/100; } else { objj.style[attr] = icur+speed+'px'; } if (flag) { console.log('未輸出任何內(nèi)容，證明動畫執(zhí)行完后未清除定時器'); clearInterval(objj.timer); if(fn){ fn(); } } } },30); }查看全部
-
//注釋所有flag代碼，動畫仍然正確執(zhí)行，不知道此時定時器是否清除 function getStyle(obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } var alpha = 30; function startMove(objj,json,fn) { //var flag = true; clearInterval(objj.timer); objj.timer = setInterval(function () { var icur = 0; for(var attr in json){ if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(objj,attr))*100); }else{ icur = parseInt(getStyle(objj,attr)); } var speed = (json[attr] - icur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); // if(icur != json[attr]){ // flag = false; // } if (attr == 'opacity') { objj.style.filter = 'alpha(opacity:'+icur+speed+')'; objj.style.opacity = (icur+speed)/100; } else { objj.style[attr] = icur+speed+'px'; } // if (flag) { // clearInterval(objj.timer); // if(fn){ // fn(); // } // } } },30); }查看全部
-
獲取樣式 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr];//IE瀏覽器 } else { return getComputedStyle(obj, false)[attr];//firefox瀏覽器 } }查看全部
-
speed=speed>0?Math.ceil(speed):Math.floor(speed);查看全部
-
filter: alpha(opacity:30); /*IE瀏覽器專用，opacity屬性值為0~100*/ opacity:0.3; /*所有主流瀏覽器都支持opacity屬性。查看全部
-
<!-- 使用js實現(xiàn)透明度運動而不采用直接設置css的style.opacity屬性來改變透明度,這是因為css的透明度的設置是一步到位，瞬時完成的，而使用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) }查看全部
-
勻速運動：<br> 1、設置定時器，每隔一段時間更改位置，達到勻速運動<br> 2、設置定時器前需清除定時器，以防多次觸發(fā)重復生成多個定時器<br> 3、當運動位置達到目標值時，可通過清除定時器停止運動<br> 4、當定義函數(shù)多處相同時，可封裝為一個函數(shù)，用不同參數(shù)調(diào)用，盡量少傳遞相同的參數(shù)<br>查看全部
-
1.速度（改變值left,right,width,height.opacity透明度） 2.緩沖運動 3.多物體運動 4.任意值變化 5.鏈式運動 6.同時運動查看全部
-
JSON 輕量級數(shù)量交互查看全部
-
兩個startMove函數(shù)異步進行，第一個函數(shù)相當于通知它去改變寬度,通知完之后，不管完成沒完成，都繼續(xù)執(zhí)行第二個函數(shù)了，而第二個函數(shù)里面也有clearInterval();就把前一個未執(zhí)行完的動畫清除了，相當于覆蓋了。（改變寬度可能要300ms,而通知可能就要1ms,第二個函數(shù)通知的時候也就1ms，很快，就相當于覆蓋了） 如果同時調(diào)用多個startMove函數(shù)，后面的startMove會清除掉前面的startMove的定時器（因為startMove函數(shù)中第一句就是clearInterval）。因此實際只有最后一個startMove被執(zhí)行了查看全部
-
四舍五入查看全部
-
運動框架實現(xiàn)思路： 1.速度（改變值Left、right、width、height、opacity） 2.緩沖運動 3.多物體運動 4.任意值變化 5.鏈式運動 （如：先寬后高） 6.同時運動 （如：寬高同時運動）查看全部
舉報
0/150
提交
取消