| <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>变宽高</title> | |
| <style> | |
| li{ | |
| width:200px; | |
| height:100px; | |
| background:red; | |
| float: none; | |
| left:0; | |
| top: 0; | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| window.onload=function(){ | |
| var oli=document.getElementsByTagName('li'); | |
| for( var i=0;i<oli.length;i++) | |
| {oli[i].onmouseover=function(){ | |
| startmove(400,"width",5); | |
| } | |
| oli[i].onmouseout=function(){ | |
| startmove(200,"width",-5); } | |
| } | |
| var oli[i].timer=null; | |
| function startmove(oli[i],itarget,khg,speed){ | |
| clearInterval(oli[i].timer); | |
| oli[i].timer=setInterval(function(){ | |
| if (oli[i].style[khg]==itarget+"px") { | |
| clearInterval(oli[i].timer); | |
| }else{ | |
| oli[i].style[khg]=parseInt(SBFH(oli[i],khg))+speed+'px'; | |
| } | |
| },30)} | |
| function SBFH(obj,attr){ | |
| if(obj.currentStyle){return obj.currentStyle[attr];} | |
| else{return getComputedStyle(obj,false)[attr];} | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <ul> | |
| <li id="li1"></li> | |
| <li id="li2"></li> | |
| </ul> | |
| </body> |
慕少5527016
一毛钱
随时随地看视频慕课网APP
相关分类