图片淡入淡出效果

图片淡入淡出效果,实际上是改变图片的不透明度实现的。最简单的方法是通过css的hover伪类来实现,不过这样的变化是瞬间完成的,不能自主控制变化速度,所以只能通过javascript来实现。

下面展示本人的代码给大家参考:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<style type="text/css">
	*{margin:0; padding:0;}
	#tp{
		opacity:0.5;
		filter:alpha(opacity=50);
	}
</style>
<script>
	window.onload=function(){
		var oTp=document.getElementById("tp");
		var timer=null;
		var alpha=50;//重要:定义一个变量存储设定的透明度数值(此值与css设置的大小一样),用来作判断
		oTp.onmouseover=function(){
			fun1(100);
		}
		oTp.onmouseout=function(){
			fun1(50);
		}
		function fun1(a){//a为不透明度取值,范围0-100
			clearInterval(timer);
			var speed=0;//定义不透明度变化的速度
			if(a>alpha){
				speed=10;
			}else{
				speed=-10;
			}
			timer=setInterval(function(){
				if(alpha==a){
					clearInterval(timer);
				}else{
					alpha+=speed;
					oTp.style.opacity=alpha/100;
					oTp.style.filter="alpha(opacity="+alpha+")";
				}
			},50);
		}
	}
</script>
	
</head>

<body>
	
	<img id="tp" src="http://www.heartmv.com/wp/wp-content/uploads/2019/04/tj.jpg" alt="">
	
</body>
</html>
看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:
顶部