-
運(yùn)動(dòng)效果的框架 function startMove(obj,json,fn){ var flag = true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ // 1、取當(dāng)前的值 var icur=null; // 如果設(shè)置的屬性為『透明度』... 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、檢測(cè)停止 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的指，獲得寬度時(shí)不是元素的實(shí)際寬，改變時(shí)會(huì)出錯(cuò)。 故需編寫一個(gè)獲取樣式的函數(shù)getStyle(obj,attr) obj為被獲取樣式的元素，attr為要獲取的樣式查看全部
-
對(duì)象獲取樣式方法 getStyle(obj,attrty)查看全部
-
多物體運(yùn)動(dòng)時(shí)，不能共用同一個(gè)定時(shí)器或同一個(gè)變量，會(huì)造成爭(zhēng)搶導(dǎo)致錯(cuò)誤。 應(yīng)該給每個(gè)物體單獨(dú)定義定時(shí)器及變量，調(diào)用函數(shù)時(shí)設(shè)置當(dāng)前物體的定時(shí)器和變量。查看全部
-
function startMove(obj,json,fn){ var flag = true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ // 1、取當(dāng)前的值 var icur=null; // 如果設(shè)置的屬性為『透明度』... 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、檢測(cè)停止 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]; } }查看全部
-
緩沖動(dòng)畫 1、速度的定義： var speed=(目標(biāo)值-當(dāng)前值（offset）)/參數(shù)； 2、取整函數(shù)： 向下取整：Math.floor(3.55);//3.55是取整的數(shù)值，結(jié)果為：3 向上取整：Math.ceil(3.35);//結(jié)果為：4 3、速度的取整判斷(防止出錯(cuò)!必不可少) speed=speed>0?Math.ceil(speed):Math.floor(speed);查看全部
-
透明度動(dòng)畫：基于速度動(dòng)畫 alpha=30; ie下透明度范圍為0-100：box.style.filter = 'alpha(opacity:'+alpha+')'; 其他瀏覽器下范圍為0-1：box.style.opacity = alpha/100; 設(shè)速度值（即透明度遞增/減值），速度值的正負(fù)與當(dāng)前透明度和目標(biāo)透明度大小相關(guān)。 當(dāng)前透明度>目標(biāo)透明度，速度值為負(fù) 當(dāng)前透明度<目標(biāo)透明度，速度值為正 每一次調(diào)用函數(shù)前，需clearInterval()把前一次的定時(shí)器清除。查看全部
-
運(yùn)動(dòng)框架實(shí)現(xiàn)思路查看全部
-
$(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秒執(zhí)行一次函數(shù)function()查看全部
-
var timer = null; clearInterval(timer);查看全部
-
先清除定時(shí)器查看全部
-
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.檢測(cè)停止 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]; } }查看全部
舉報(bào)
0/150
提交
取消