-
獲取真正的樣式查看全部
-
function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }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); }查看全部
-
Math.round()，四舍五入 設置透明度： 對IE瀏覽器：filter:alpha(opacity:30); 對其他瀏覽器：opacity: 0.3; startMove(this,'opacity',100),this指代這個Li1,opacity是參數，也可以是width或者height,100為目標值，透明度的目標值。 Li1.onmouseover=function(){ startMove(this,'opacity',100); } 用getStyle這個方法去獲取樣式比用setoffWidth,更加準備，getStyle(obj,'width');是獲取屬性值，setoffWidth是獲取整個盒子的值。（加邊框） function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(Li1,'height',400); } Li1.onmouseout=function(){ startMove(Li1,'height',200); } Li2.onmouseover=function(){ startMove(Li2,'width',400); } Li2.onmouseout=function(){ startMove(Li2,'width',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=parseInt(getStyle(obj,attr)); var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }else{ obj.style[attr]=icur+speed+'px'; } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
有border/padding屬性的div運動時不能用offsetX屬性獲取div的X,因為offsetX獲取的是div盒子的屬性 不是conten的屬性！ 在用到obj.offsetWidth或者obj.offsetHeight的時候，如果，obj對象的樣式有border等屬性，則需要用getStyle()函數解決實際width和height值樣式不兼容的問題 //獲取style樣式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
多物體運動時，不能共用同一個定時器或同一個變量，會造成爭搶導致錯誤。應該給每個物體單獨定義定時器及變量，調用函數時設置當前物體的定時器和變量 /** * 1.3-2多物體透明度 */ window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ oDiv[i].timer=null; oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ startMove(this,100); } oDiv[i].onmouseout=function(){ startMove(this,30); } } } function startMove(obj,iTarget){ //防止定時器重復使用 clearInterval(obj.timer); //實例化定時器 obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>iTarget){ speed=-10; }else{ speed=10; } if(obj.alpha==iTarget){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } }, 30); }查看全部
-
緩沖運動查看全部
-
透明度動畫：基于速度動畫 alpha=30; ie下透明度范圍為0-100：box.style.filter = 'alpha(opacity:'+alpha+')'; 其他瀏覽器下范圍為0-1：box.style.opacity = alpha/100; 設速度值（即透明度遞增/減值），速度值的正負與當前透明度和目標透明度大小相關。 當前透明度>目標透明度，速度值為負 當前透明度<目標透明度，速度值為正 每一次調用函數前，需clearInterval()把前一次的定時器清除。查看全部
-
透明度查看全部
-
/*1.3精簡參數, iTarget:偏移目標值 用當前offsetLeft的值與傳入的目標值來判斷增加和減少 */ function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); timer= setInterval(function(){ var speed=0; //如果當前值大于目標就是正向運動 if(oDiv.offsetLeft > iTarget){ speed=-10; }else{ //如果小于目標值就是反向運動 speed=10; }; if(oDiv.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); }查看全部
-
start move 開始移動（0，100）移動到哪里停止查看全部
-
js對json的處理查看全部
-
運動框架實現思路查看全部
-
jQuery里已有的一個動畫框架，與之前的js封裝相似，還可以考慮使用css3的方法實現動畫效果查看全部
-
設置內聯樣式 obj.style.width=parseInt(obj.style.width)+speed+"px"; 使用函數獲取屬性 function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';查看全部
舉報
0/150
提交
取消