js实现图片匀速淡入淡出
程序员文章站
2022-06-17 12:20:47
...
这次给大家带来js实现图片匀速淡入淡出，js实现图片匀速淡入淡出的注意事项有哪些，下面就是实战案例，一起来看一下。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>淡入效果</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
border: 2px solid #aaa;
}
img {
width: 300px;
height: 300px;
filter: alpha(opacity:30);
opacity: .3;
margin: 0 auto;
}
</style>
</head>
<body>
<p>
<imgsrc="img/timg.jpg"alt=""id="img">
</p>
<script>
var alpha=30;
var img = document.getElementById("img");
img.onmouseover=function(){
startMove(100)
};
img.onmouseout=function(){
startMove(30)
}
var timer;
function startMove(tar) {
var img = document.getElementById("img");
clearInterval(timer);
timer = setInterval(function () {
var ispeed=0;
ispeed= alpha<tar?5:-5;
if(alpha==tar){
clearInterval(timer)
}
else{
alpha+=ispeed;
img.style.filter="alpha(opacity:"+alpha+")";
img.style.opacity=alpha/100;
}
}, 30)
}
</script>
</body>
</html> |
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是js实现图片匀速淡入淡出的详细内容，更多请关注其它相关文章！