-
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]; } }查看全部
-
獲取style樣式的方法查看全部
-
運動框架實現思路查看全部
-
運動框架實現思路查看全部
-
運動框架實現思路查看全部
-
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]; } }查看全部
-
jQuery里已有的一個動畫框架，與之前的js封裝相似，還可以考慮使用css3的方法實現動畫效果 $(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); }); }); });查看全部
-
代碼框架查看全部
-
案例布局查看全部
-
json 格式 和 用法 json{a:12,b:13} 遍歷用json用for-in格式 為了解決不能同時到達目標時取消定時器的問題，立了一個flag，然后通過是否有屬性到達目標值，一旦有，則為false，則不會取消定時器，如果沒有，則每次觸發都為true，然后直接取消查看全部
-
js中json的用法查看全部
-
鏈式動畫，在startMove(obj,attr,iTarget,fn)再加一個fn參數，并在清除動畫之后，加入fn方法：if(fn){fn();} 在主頁中，在三個參數之后再加入一個參數 startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }) })查看全部
-
設置內聯樣式 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';查看全部
-
緩沖動畫 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);查看全部
-
/*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); }查看全部
舉報
0/150
提交
取消