今天吃得很饱。会长生日快乐:)
以前写文章都是解释加上代码，现在偷个懒，直接把解释写在代码注释里了，自己感觉蛮方便的。今天花了很长时间总结这个，都用来找BUG了。。。
宽度变长的div---初级版
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>div变宽</title> 6 <style> 7 div{width:100px;height:30px;background:#99CC66;margin-bottom:20px;} 8 </style> 9 <script> 10 window.onload=function(){ 11 var oDiv=document.getElementById('div1'); 12 oDiv.onmouseover=function(){ 13 startMove(300); 14 }; 15 oDiv.onmouseout=function(){ 16 startMove(100); 17 } 18 }; 19 20 var timer=null; 21 clearInterval(timer); 22 function startMove(iTarget){ 23 var oDiv=document.getElementById('div1'); 24 var iSpeed=(iTarget-oDiv.offsetWidth)/8; 25 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 26 timer=setInterval(function(){ 27 if(oDiv.offsetWidth==iTarget){ 28 clearInterval(timer); 29 } 30 else{ 31 oDiv.style.width=oDiv.offsetWidth+iSpeed+'px'; 32 } 33 },30) 34 }; 35 </script> 36 </head> 37 38 <body> 39 <div id="div1"></div> 40 </body> 41 </html>
宽度变长的div---改进版
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>div变宽改进版</title> 6 <style> 7 div{width:100px;height:30px;background:#00FFFF;margin-top:10px;} 8 </style> 9 <script type="text/javascript"> 10 window.onload=function(){ 11 var oDiv=document.getElementsByTagName('div'); 12 var i=0; 13 for(i=0;i<oDiv.length;i++){ //通过循环来获取每一个事件 14 oDiv[i]=null; 15 oDiv[i]=onmouseover=function(){ 16 startMove(this,200); 17 } 18 oDiv[i]=onmouseout=function(){ 19 startMove(this,100) 20 } 21 } 22 } 23 24 function startMove(obj,iTarget){ //传递两个参数 25 clearInterval(obj.timer); //代表当前选中的那个div的事件 26 obj.timer=setInterval(function(){ 27 var iSpeed=(iTarget-obj.offsetWidth)/8; 28 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 29 if(iTarget==obj.offsetWidth) 30 { 31 clearInterval(obj.timer); 32 } 33 else 34 { 35 obj.style.width=obj.offsetWidth+iSpeed+'px';//火狐提示这个位置没有定义，奇了怪了，怎么会没有定义呢，天理不容啊 36 } 37 },30) 38 } 39 </script> 40 </head> 41 42 <body> 43 <div></div> 44 <div></div> 45 <div></div> 46 </body> 47 </html>
多个div的淡入淡出
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>多个div淡入淡出</title> 6 <style> 7 div{width:100px;height:100px;background:#0000FF;float:left;margin-left:20px;opacity:0.3;} 8 </style> 9 <script> 10 window.onload=function(){ 11 var aDiv=document.getElementsByTagName('div'); 12 var i=0; 13 for(i=0;i<aDiv.length;i++){ 14 aDiv[i].alpha=30; //初始化不透明度 15 aDiv[i].onmouseover=function(){ 16 startMove(this,100) 17 } 18 aDiv[i].onmouseout=function(){ 19 startMove(this,30) 20 } 21 } 22 } 23 function startMove(obj,iTarget){ 24 clearInterval(obj.timer); 25 obj.timer=setInterval(function(){ 26 var iSpeed=(iTarget-obj.alpha)/8; 27 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 28 if(obj.alpha==iTarget){ 29 clearInterval(obj.timer); 30 } 31 else{ 32 obj.alpha+=iSpeed; //多个元素的运动，需要把事件确定到每个元素，不能有公用的 33 obj.style.filter='alpha(opacity:'+obj.alpha+')'; 34 obj.style.opacity=obj.alpha/100; 35 } 36 },30); 37 } 38 </script> 39 </head> 40 41 <body> 42 <div></div> 43 <div></div> 44 <div></div> 45 <div></div> 46 <div></div> 47 <div></div> 48 <div></div> 49 <div></div> 50 <div></div> 51 <div></div> 52 </body> 53 </html>
offsetWidth-----在运动过程中会出现BUG，offsetWidth包括border，不懂的可以参见上一篇文章的图
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>offsetWidth</title> 6 <style> 7 #div1{width:100px;height:100px;background:#0000FF;border:2px solid #00FF00;} 8 </style> 9 <script> 10 setInterval( 11 function(){ 12 var oDiv=document.getElementById('div1'); 13 oDiv.style.width=oDiv.offsetWidth-1+'px';},30) 、//当使用这个属性的时候，div会向右伸展，反而不会向左减小；主要是因为div的border影响了。Div.style.width=oDiv.offsetWidth-1;例如：100px=102-1=101px,div.width增加了一个像素（第一次）-----101px=103-1=102px,div.width又增加了一个像素（第二次）...以此类推 14 </script> 15 </head> 16 17 <body> 18 <div id="div1"></div> 19 </body> 20 </html>
使用getStyle函数
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>offsetWidth</title> 6 <style> 7 #div1{width:100px;height:100px;background:#0000FF;border:2px solid #00FF00;} 8 </style> 9 <script> 10 function getStyle(obj,attr){ //使用该函数获取非行间样式 11 if(obj.currentStyle){ 12 return obj.currentStyle[attr]; 13 } 14 else{ 15 return getComputedStyle(obj,false)[attr]; 16 } 17 } 18 setInterval( 19 function(){ 20 var oDiv=document.getElementById('div1'); 21 oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';//对行间样式没有作用 22 },30) 23 </script> 24 </head> 25 26 <body> 27 <div id="div1"></div> 28 </body> 29 </html>
任意值的变化
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 div{width:100px;height:20px;background:#666666;border:2px solid black;margin-top:20px;} 8 </style> 9 <script> 10 window.onload=function(){ 11 var aDiv=document.getElementsByTagName('div'); 12 var i=0; 13 for(i=0;i<aDiv.length;i++){ 14 aDiv[i].timer=null; 15 aDiv[i].onmouseover=function(){ 16 startMove(this,200); 17 } 18 aDiv[i].onmouseout=function(){ 19 startMove(this,100); 20 } 21 } 22 }; 23 24 25 function getStyle(obj,attr){ 26 if(obj.currentStyle){ 27 return obj.currentStyle[attr]; 28 } 29 else{ 30 return getComputed(obj,false)[attr]; 31 } 32 }; 33 34 function startMove(obj,iTarget){ 35 clearInterval(obj.timer); 36 obj.timer=setInterval(function(){ 37 var iSpeed=(iTarget-obj.offsetWidth)/8; 38 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 39 if(obj.offsetWidth==iTarget){ 40 clearInterval(obj.timer); 41 } 42 else{ 43 obj.style.width=obj.offsetWidth+iSpeed+'px'; 44 } 45 46 47 },30) 48 }; 49 </script> 50 </head> 51 52 <body> 53 <div></div> 54 <div></div> 55 <div></div> 56 </body> 57 </html>
任意值2
1 function getStyle(obj,attr){ 2 if(obj.currentStyle){ 3 return obj.currentStyle[attr]; 4 } 5 else{ 6 return getComputedStyle(obj,false)[attr]; 7 } 8 }; 9 10 function startMove(obj,iTarget){ 11 clearInterval(obj.timer); 12 obj.timer=setInterval(function(){ 13 var iCurrent=parseInt(getStyle(obj,'width')); //获取样式并且取整 14 var iSpeed=(iTarget-iCurrent)/8; 15 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 16 if(iCurrent==iTarget){ 17 clearInterval(obj.timer); 18 } 19 else{ 20 obj.style.width=iCurrent+iSpeed+'px'; 21 } 22 23 24 },30) 25 };
任意值3
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 div {width:100px; height:50px; font-size:12px; background:red; margin-top:50px; border:2px solid black;} 6 </style> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>无标题文档</title> 9 <script type="text/javascript"> 10 window.onload=function() 11 { 12 var aDiv=document.getElementsByTagName('div'); 13 14 aDiv[0].onclick=function(){ //对应下面的第一个图片 15 startMove(this,'width',200) 16 }; 17 aDiv[1].onclick=function(){ //对应第二幅图 18 startMove(this,'height',200) 19 }; 20 aDiv[2].onclick=function(){ //对应第三幅图 21 startMove(this,'fontSize',40) //S要大写 22 }; 23 aDiv[3].onclick=function(){ //对应第四幅图 24 startMove(this,'borderWidth',20) //注意W要大写 25 }; 26 }; 27 28 function getStyle(obj, attr) 29 { 30 if(obj.currentStyle) 31 { 32 return obj.currentStyle[attr]; 33 } 34 else 35 { 36 return getComputedStyle(obj, false)[attr]; 37 } 38 } 39 40 function startMove(obj, attr, iTarget) 41 { 42 clearInterval(obj.timer); 43 obj.timer=setInterval(function (){ 44 var iCur=parseInt(getStyle(obj, attr)); 45 var iSpeed=(iTarget-iCur)/8; 46 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 47 48 if(iCur==iTarget) 49 { 50 clearInterval(obj.timer); 51 } 52 else 53 { 54 obj.style[attr]=iCur+iSpeed+'px'; 55 } 56 }, 30) 57 } 58 </script> 59 </head> 60 61 <body> 62 <div></div> 63 <div></div> 64 <div> 65 123 66 </div> 67 <div></div> 68 </body> 69 </html>
效果图
暂时到这儿，欢迎纠错:)