标签:
思想:
其实是运动的一种,就是当鼠标移入div中时,将div的透明度变大,
当鼠标移动出来的时候透明度变回原来。
你可以尝试写一下,不会再看看代码
<style> #div1{ width:200px;height:200px; background:red; filter:alpha(opacity:30);opacity:0.3; margin:0 auto; } </style> <body> <div id="div1"> </div> </body>
记住透明度有兼容性问题,
js代码如下
<script> window.onload=function() { var div1=document.getElementById(‘div1‘); div1.onmouseover=function() { startMove(100); }; div1.onmouseout=function() { startMove(30); }; }; var alpha=30; var timer=null; function startMove(it) { var div1=document.getElementById(‘div1‘); clearInterval(timer); timer=setInterval(function() { var speed=0; //定义运动的速度 if (alpha<it) { speed=5; } else { speed=-5; } if (alpha==it) //若传入的的透明度等于本来的透明度就清除定时器 { clearInterval(timer); } else { alpha=alpha+speed; div1.style.filter=‘alpha(opacity:"+alpha+")‘; div1.style.opacity=alpha/100; } },30) } </script>
js代码比较简单,不详细解释了,
标签:
原文地址:http://www.cnblogs.com/biyongyao/p/5847513.html