首页 > 代码库 > js实现图片的淡入淡出
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实现图片的淡入淡出
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。