复制代码 代码如下: 无标题文档 <BR> #div1{width:100px;height:100px;background:#ccc;position:absolute;top:0px;left:0px;}<BR> #div2{width:100px;height:100px;background:#ccc;position:absolute;left:0px;top:110px;}<BR> #div3{width:100px;height:100px;background:red;position:absolute;left:220px;top:0px;filter:alpha(opacity:30);opacity:0.3;}<BR> #div4{width:100px;height:100px;background:red;position:absolute;left:330px;top:0px;filter:alpha(opacity:30);opacity:0.3;}<BR> #div5{width:100px;height:100px;background:red;position:absolute;left:440px;top:0px;filter:alpha(opacity:30);opacity:0.3;}<BR> <BR>window.onload=function()<BR>{ <BR> oDiv1=document.getElementById("div1");<BR> oDiv2=document.getElementById("div2");<BR> oDiv3=document.getElementById("div3");<BR> oDiv4=document.getElementById("div4");<BR> oDiv5=document.getElementById("div5"); <P> oDiv1.onmouseover=function(){<BR> Move(oDiv1,"width",200); <BR> //alert(getStyle(oDiv1,"width"));<BR> }<BR> oDiv1.onmouseout=function(){<BR> Move(oDiv1,"width",100);<BR> }<BR> oDiv2.onmouseover=function(){<BR> Move(oDiv2,"height",200); <BR> }<BR> oDiv2.onmouseout=function(){<BR> Move(oDiv2,"height",100);<BR> }<BR> oDiv3.onmouseover=function(){<BR> Move(oDiv3,"opacity",100);<BR> }<BR> oDiv3.onmouseout=function(){<BR> Move(oDiv3,"opacity",30);<BR> } <P> oDiv4.onmouseover=function(){<BR> Move(oDiv4,"opacity",100); <BR> }<BR> oDiv4.onmouseout=function(){<BR> Move(oDiv4,"opacity",30);<BR> }<BR> oDiv5.onmouseover=function(){<BR> Move(oDiv5,"opacity",100); <BR> }<BR> oDiv5.onmouseout=function(){<BR> Move(oDiv5,"opacity",30);<BR> }<br><br> <BR>} <BR> //获取行间样式 <BR> function getStyle(obj,attr) //getStyle 非行间属性 结果值为 ***px <BR> { if(obj.currentStyle)<BR> {<BR> return obj.currentStyle[attr];<BR> }<BR> else{<BR> return getComputedStyle(obj,false)[attr];<BR> } <BR> } <BR> //多物体不同运动框架<BR> function Move(obj,attr,itarget)<BR> { <BR> clearInterval(obj.timer);<BR> obj.timer=setInterval(function(){<BR> if(attr=="opacity")<BR> { cur=parseFloat(getStyle(obj,attr))*100;<BR> speed=(itarget-cur)/10;<BR> speed=speed>0?Math.ceil(speed):Math.floor(speed); <br><br> if(cur==itarget)<BR> {<BR> clearInterval(obj.timer);<BR> }else<BR> { cur+=speed;<BR> obj.style.opacity=cur/100;<BR> obj.style.filter="alpha(opacity:"+cur+")"; <BR> } <BR> }<BR> else<BR> {<BR> cur=parseInt(getStyle(obj,attr));<BR> speed=(itarget-cur)/10; //parseInt 获取的值转化为数<BR> speed=speed>0?Math.ceil(speed):Math.floor(speed); //向下、向上取正<br><br> if(cur==itarget)<BR> {<BR> clearInterval(obj.timer);<BR> }else<BR> {<BR> obj.style[attr]=cur+speed+"px"; <BR> } <BR> } <br><br> },30) <BR> } <BR> 变宽 变高
