-
function startMove(obj,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=parseInt(getStyle(obj,'height')); 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['height']=icur+speed+'px'; } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width:200px; height:200px; background:#888888; border:10px solid #000; font-size:12px; color:#fff; } </style> <script> window.onload=function(){ startMove(); } function startMove(){ setInterval(function(){ var oDiv=document.getElementById('div1'); oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px'; oDiv.style.fontSize=parseInt(getStyle(oDiv,'fontSize'))+1+'px'; },30); } /** * 獲取樣式 * @param {[type]} obj [description] * @param {[type]} attr [description] * @return {[type]} [description] */ function getStyle(obj,attr){ if(obj.currenStyle){//針對IE return obj.currentStyle[attr]; }else{//getComputedStyle 針對fireFox瀏覽器 return getComputedStyle(obj,false)[attr]; } } </script> </head> <body> <div id="div1" >fontSize</div> </body> </html>查看全部
-
/** * 獲取樣式 * @param {[type]} obj [description] * @param {[type]} attr [description] * @return {[type]} [description] */ function getStyle(obj,attr){ if(obj.currenStyle){//針對IE return obj.currentStyle[attr]; }else{//getComputedStyle 針對fireFox瀏覽器 return getComputedStyle(obj,false)[attr]; } }查看全部
-
offsetWidth是包含了元素的邊框的高度.查看全部
-
div寬度+border查看全部
-
window.onload=function(){ startMove(); } function startMove(){ setInterval(function(){ var oDiv=document.getElementById('div1'); oDiv.style.width=oDiv.offsetWidth-1+'px'; },30); }查看全部
-
/** * 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); }查看全部
-
只要是多物體運動,所有東西都不能共用查看全部
-
<script> /** * 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].onmouseover=function(){ startMove(this,100); } oDiv[i].onmouseout=function(){ startMove(this,30); } } } var alpha=30;//1.3 function startMove(obj,iTarget){ //防止定時器重復使用 clearInterval(obj.timer); //實例化定時器 obj.timer=setInterval(function(){ var speed=0; if(alpha>iTarget){ speed=-10; }else{ speed=10; } if(alpha==iTarget){ clearInterval(obj.timer); }else{ alpha+=speed; obj.style.filter='alpha(opacity:'+alpha+')'; obj.style.opacity=alpha/100; } }, 30); } </script>查看全部
-
<script> /** * 1.2鼠標移入移出改變寬度-多對象共用一個定時器會出現(xiàn)問題,所以要保證每個對象都有自己的定時器 */ window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].timer=null;//1.2+++ aLi[i].onmouseover=function(){ startMove(this,400); } aLi[i].onmouseout=function(){ startMove(this,200); } } } function startMove(obj,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var speed =(iTarget-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==iTarget){ clearInterval(obj.timer);//1.2+++ }else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30); } </script>查看全部
-
多對象共同使用一個方法時,不能共用定時器,需要給每個對象創(chuàng)建定時器變量.查看全部
-
<script> /** * 1.1鼠標移入移出改變寬度--缺點是鼠標移入然后快速移到另一物體時,之前的物體不能恢復到原來的寬度 */ window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover=function(){ startMove(this,400); } aLi[i].onmouseout=function(){ startMove(this,200); } } } var timer=null; function startMove(obj,iTarget){ clearInterval(timer); timer=setInterval(function(){ var speed =(iTarget-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==iTarget){ clearInterval(timer); }else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30); } </script>查看全部
-
每次執(zhí)行定時器之前，記得清楚定時器查看全部
-
獲取樣式查看全部
-
運動框架實現(xiàn)思路查看全部
舉報
0/150
提交
取消