js实现图片的淡入淡出
Posted 小极客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现图片的淡入淡出相关的知识，希望对你有一定的参考价值。
思想：
其实是运动的一种，就是当鼠标移入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代码比较简单，不详细解释了，
以上是关于js实现图片的淡入淡出的主要内容，如果未能解决你的问题，请参考以下文章