-
【難】 json 的用法 同時運動動畫效果查看全部
-
JS動畫運動框架查看全部
-
獲取樣式查看全部
-
運動框架實現(xiàn)思路查看全部
-
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獲取的是像素值查看全部
-
多物體動畫不能共用一個定時器。查看全部
-
function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag=true; //標(biāo)志所有運動是否到達目標(biāo)值 for(var attr in json){ var curr=0; //獲取當(dāng)前的值,設(shè)置為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)/8; //json[attr]為屬性值即目標(biāo)值 speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整數(shù),將速度取整從而達到目標(biāo)值 //檢測停止 if(curr!= json[attr]){ flag=false;//檢測為false則繼續(xù)下面的操作 } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+’)’;//IE瀏覽器 obj.style.opacity=(curr+speed)/100;//firefox瀏覽器 }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ //檢測為true則繼續(xù)下面的操作 clearInterval(obj.timer); if(fn){ //檢測是否有回調(diào)函數(shù),有就執(zhí)行 fn(); } } },30); } //取樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //IE取樣式 }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
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 { return getComputedStyle(obj,false)[attr]; } } obj.offsetWidth 返回值是數(shù)值所以不用parseInt();而obj.style.width獲取的是像素值查看全部
-
緩沖運動思路!查看全部
-
不能直接設(shè)置就用賦值。查看全部
-
雖然傳遞的參數(shù)越少越感覺高大上(但個人覺得若是第一次讀這樣的代碼會需要更久的理解時間。查看全部
-
變成傳遞參數(shù)的了查看全部
-
一步一步該起來最后變成可以動的查看全部
-
JS動畫基本模板查看全部
-
getStyle,獲得屬性查看全部
舉報
0/150
提交
取消