-
6-2 完美運動框架 同時運動 .利用JSON來實現(xiàn)同時運動 ..解析 for(var i in Json){ Json[i] } .{attr1:itarget1,att2:itarget2} .設置標志flag來標識是否所有運動執(zhí)行完畢 if(iCur != json[attr]) flag = false; if(flag)clearInterval(obj.timer) if(fn) fn(); JSON（利用其完成同時運動） json={name:key,name:key....}可以在一個括號內(nèi)加入多對值 利用for in 遍歷 ：for(var i in JSON) i表示name,JSON[i]標示key(值) 可以將其理解為（屬性:值）的組合查看全部
-
S動畫效果： 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){ 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); }查看全部
-
框架最終 function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } function move(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag = true; for(var attr in json){ //取當前值 var icur =0; if(attr=='opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr)*100)); }else{ icur = parseInt(getStyle(obj,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') { obj.style.opacity = (icur+speed)/100; obj.style.filter = 'alpha(opacity='+(icur+speed)+')'; }else{ obj.style[attr] = icur+speed+"px"; } } if(flag) { clearInterval(obj.timer); if(fn) { fn(); } } }, 30) }查看全部
-
offset*再添加border等屬性會出現(xiàn)bug查看全部
-
ie--->currentStyle[attr] getcomputedStyle(obj,false)[attr]查看全部
-
多物體不能共用查看全部
-
透明度設置 filter:alpha(opacity:30)===>ie opacity:0.3===>其他瀏覽器查看全部
-
filter:alpha(opacity:30);//針對IE opacity:0.3;//firefox和chrome查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//針對IE }else{ return getComputedStyle(obj,false)[attr];//針對firefox } }查看全部
-
6-1 同時運動 用到json查看全部
-
5-1 鏈式動畫 window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.timer = null; oDiv.onmouseover = function(){ startMove(oDiv,'width',400,function(){ startMove(oDiv,'height',400,function(){ startMove(oDiv,'opacity',100); }); }); }; oDiv.onmouseout = function(){ startMove(oDiv,'height',200,function(){ startMove(oDiv,'opacity',30,function(){ startMove(oDiv,'width',200) }) }); }; }; window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.timer = null; oDiv.onmouseover = function(){ startMove(oDiv,'width',400,function(){ startMove(oDiv,'height',400,function(){ startMove(oDiv,'opacity',100); }); }); }; oDiv.onmouseout = function(){ startMove(oDiv,'height',200,function(){ startMove(oDiv,'opacity',30,function(){ startMove(oDiv,'width',200) }) }); }; };查看全部
-
4-4 任意屬性值（二） 在使用parseInt()時處理透明度小數(shù)時,會有影響 單位設置 相應位置進行判斷 IE/FireFox 取相應值 Math.round()四舍五入取整數(shù)值 Math.round(parseFloat(getStyle(obj,attr))*100) parseInt(string, radix) parseInt() 函數(shù)可解析一個字符串，并返回一個整數(shù)。 當參數(shù) radix 的值為 0，或沒有設置該參數(shù)時，parseInt() 會根據(jù) string 來判斷數(shù)字的基數(shù)。 當忽略參數(shù) radix , JavaScript 默認數(shù)字的基數(shù)如下: 如果 string 以 "0x" 開頭，parseInt() 會把 string 的其余部分解析為十六進制的整數(shù)。 如果 string 以 0 開頭，那么 ECMAScript v3 允許 parseInt() 的一個實現(xiàn)把其后的字符解析為八進制或十六進制的數(shù)字。 如果 string 以 1 ~ 9 的數(shù)字開頭，parseInt() 將把它解析為十進制的整數(shù)。 getComputerStyle()方法返回一個CSS Style Declaration對象 Math.round()將一個數(shù)四舍五入為一個最接近的整數(shù)查看全部
-
4-3 任意屬性值（一） 功能完全相同的代碼，可以將不同的東西當做參數(shù)傳進去。 obj.style.width=curr+speed+'px'; // 這樣寫，有利于整理代碼，可以將其作為參數(shù)傳入，下面一條將其作為參數(shù)attr // 傳進來，就可以實現(xiàn)不同樣式的運動 // obj.style['height']=curr+speed+'px'; obj.style[attr]=curr+speed+'px';查看全部
-
<script> window.onload=function(){ startMove(); }; function startMove(){ setInterval(function(){ var oDiv=document.getElementById('div1'); // offsetWidth獲取的是它整個的寬度：包括內(nèi)容寬度和邊框等等 // oDiv.style.width=oDiv.offsetWidth-1+'px'; // 當把樣式寫在行內(nèi)時，可以通過如下方法獲取 // oDiv.style.width=parseInt(oDiv.style.width)-1+'px'; // 當不把樣式寫在行內(nèi)是，可以通過getStyle函數(shù)獲取 oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px'; oDiv.style.fontSize=parseInt(getStyle(oDiv,'font-size'))-1+'px'; },30) } // getStyle函數(shù)是一個封裝好的用來獲取樣式的函數(shù) function getStyle(obj,attr){ // currentStyle:針對IE瀏覽器 if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ // getComputedStyle:針對Firefox瀏覽器 return getComputedStyle(obj,false)[attr]; } } <!--<div id="div1" >--> <div id="div1">干酪 </div>查看全部
-
4-2 獲取樣式 . DOM元素.style.width 在元素上加上邊框時offsetWidth是整個元素的寬度(包括邊框 padding等) . 利用行內(nèi)樣式Dom元素.style.width parseInt()取整 . currentStyle[attr] (IE)針對Ie瀏覽器 getComputedStyle(obj,false)[attr] (firefox)針對firefox瀏覽器 function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];} else{return getComputedStyle(obj,false)[attr];} }查看全部
舉報
0/150
提交
取消