-
運動效果的框架 function startMove(obj,json,fn){ var flag = true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ // 1、取當前的值 var icur=null; // 如果設置的屬性為『透明度』... if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } // 2、算速度 var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); // 3、檢測停止 if(icur!=json[attr]){ flag = false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
獲取樣式： div.offsetWidth獲得的是width+border+padding的值， clientWidth獲得的事width+padding的指，獲得寬度時不是元素的實際寬，改變時會出錯。 故需編寫一個獲取樣式的函數getStyle(obj,attr) obj為被獲取樣式的元素，attr為要獲取的樣式查看全部
-
對象獲取樣式方法 getStyle(obj,attrty)查看全部
-
多物體運動時，不能共用同一個定時器或同一個變量，會造成爭搶導致錯誤。 應該給每個物體單獨定義定時器及變量，調用函數時設置當前物體的定時器和變量。查看全部
-
function startMove(obj,json,fn){ var flag = true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ // 1、取當前的值 var icur=null; // 如果設置的屬性為『透明度』... if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } // 2、算速度 var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); // 3、檢測停止 if(icur!=json[attr]){ flag = false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
緩沖動畫 1、速度的定義： var speed=(目標值-當前值（offset）)/參數； 2、取整函數： 向下取整：Math.floor(3.55);//3.55是取整的數值，結果為：3 向上取整：Math.ceil(3.35);//結果為：4 3、速度的取整判斷(防止出錯!必不可少) speed=speed>0?Math.ceil(speed):Math.floor(speed);查看全部
-
透明度動畫：基于速度動畫 alpha=30; ie下透明度范圍為0-100：box.style.filter = 'alpha(opacity:'+alpha+')'; 其他瀏覽器下范圍為0-1：box.style.opacity = alpha/100; 設速度值（即透明度遞增/減值），速度值的正負與當前透明度和目標透明度大小相關。 當前透明度>目標透明度，速度值為負 當前透明度<目標透明度，速度值為正 每一次調用函數前，需clearInterval()把前一次的定時器清除。查看全部
-
運動框架實現思路查看全部
-
$(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"200px",opacity:0},300,function(){ $(this).css({top:-200}); $(this).animate({top:"0px",opacity:100},200); }); }); });查看全部
-
timer = setInterval(function(){ },30) 每隔30秒執行一次函數function()查看全部
-
var timer = null; clearInterval(timer);查看全部
-
先清除定時器查看全部
-
move.js function startMove(obj,attr,iTarget,fn){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判斷類型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.檢測停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ fn(); } }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); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
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); } 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]; } }查看全部
舉報
0/150
提交
取消