-
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鼠标移入移出改变宽度-多对象共用一个定时器会出现问题,所以要保证每个对象都有自己的定时器 */ 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>查看全部
-
多对象共同使用一个方法时,不能共用定时器,需要给每个对象创建定时器变量.查看全部
-
<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>查看全部
-
每次执行定时器之前，记得清楚定时器查看全部
-
获取样式查看全部
-
运动框架实现思路查看全部
举报
0/150
提交
取消