コードをコピー コードは次のとおりです: 无标题文档 <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> <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> 関数 getStyle(obj,attr) //getStyle 非interline 属性 結果の値は ***px です。 <br> { if(obj.currentStyle)<br> {<br> return obj.currentStyle[attr];<br> }<br> return getComputedStyle(obj, false)[ attr];<br> } <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> obj.style.filter="alpha(opacity:" cur ") "; cur=parseInt(getStyle(obj,attr));値は数値に変換されます <br>speed=speed>0?Math.ceil(speed):Math.floor(speed) // 下方向と上方向に正の値を取る <br><br> if(cur==itarget); <br>else<br> {<br> obj.style[attr]=cur speed "px"; <br> } <br> } <br><br> },30) <br> } <br> 变宽 变高