JS运动实现图片的淡入淡出原理

最新推荐文章于 2019-06-04 16:20:41 发布

风潮弟弟

最新推荐文章于 2019-06-04 16:20:41 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js代码文章标签： JS运动基础应用

本文链接：https://blog.youkuaiyun.com/dfc_xiaoke/article/details/82902057

js代码专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在网站中实现图片淡入淡出特效的方法，通过HTML、CSS和JavaScript代码，可以为网站图片添加动态视觉效果，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小编在这里为大家带来的是图片的淡入淡出原理，在做网站时我们可以为图片添加淡入淡出的特效、增加网站的视觉效果。下面是对应的原理代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淡入淡出</title>
		<style type="text/css">
			#div1 {width: 200px; height: 200px; background: red; filter: alpha(opacity:30); opacity: 0.3;}
			/*filter: alpha(opcaity: 30)透明度给IE用的     opcaity: 0.3 给火狐，Chrome用的*/ 
 	</style>
 	<script type="text/javascript">
 		window.onload = function () {
 			var Odiv = document.getElementById('div1');
 			
 			Odiv.onmouseover=function () {
 				startMove(100);
 			};
 			Odiv.onmouseout=function () {
 				startMove(30);
 			}
 		}
 		
 		var timer=null;
 		var alpha = 30;
 		
 		function startMove(iTarget) {
 			var oDiv = document.getElementById('div1');
 			clearInterval(timer);
 			timer = setInterval(function () {
 				 var speed = 0;
 				 if (alpha<iTarget)
 				 {
 				 	speed = 10;
 				 } else{
 				 	speed = -10;
 				 }
 				 
 				if (alpha == iTarget) {
 					clearInterval(timer);
 				} else{
 					alpha += speed;
 					
 					oDiv.style.filter = 'alpha(opacity:'+alpha+')';
 					oDiv.style.opacity = alpha/100;
 				}
 			},30)
 		}
 	</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

下面是运行后的效果，效果其实都是渐变的，如果想知道是什么样子，还要麻烦小伙伴们自己将上面的代码进行运行。

运行前
运行后