js運動フレーム_画像を含むフェードアウト効果
4510 ワード
<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></p>
<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> 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>
・