JavaScript运动

最新推荐文章于 2024-03-28 09:35:35 发布

qianlingvip

最新推荐文章于 2024-03-28 09:35:35 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/zhangqling/article/details/83382396

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片淡出</title>
	<style>
		img{
			display: block;
			width: 230px;
			height: 380px;
			filter: alpha(opacity:30);
			opacity: 0.3;
		}
		h3,img{
			margin:0 auto;
			text-align: center;
		}
	</style>
	<script>
		window.onload=function(){
			var oImg=document.getElementById("img1");
			timer=null;
			var alpha=30;
			function startMove(iTarget){
				clearInterval(timer);
				timer=setInterval(function(){
					var iSpeed=0;
					if (alpha<=iTarget) {
						iSpeed=1;
					}else{
						iSpeed=-1;
					}
					if (alpha==iTarget) {
						clearInterval(timer);
					}else{
						alpha+=iSpeed;
						oImg.style.opacity=alpha/100;
						oImg.style.filter=alpha+'(opacity:'+alpha+')'
					}
				},30);
			}

			oImg.onmouseover=function(){
				startMove(100);
			}
			oImg.onmouseout=function(){
				startMove(30);
			}
		}
	</script>
</head>
<body>
	<h3>图片动画淡出</h3>
	<img src="timg.jpg" alt="" id="img1" />
</body>
</html>

鼠标滑过之前如下图：