思想:
其實是運動的一種,就是當鼠標移入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代碼比較簡單,不詳細解釋了,
