39、JavaScript的运动----淡入淡出的图片

最新推荐文章于 2023-12-27 13:33:55 发布

Bwz_Learning

最新推荐文章于 2023-12-27 13:33:55 发布

阅读量445

点赞数 1

分类专栏： JavaScript_Bak 文章标签： JavaScript 图片透明度的设置图片透明度的变化 img

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51721655

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、JavaScript的运动----淡入淡出的图片

1.1 透明度的兼容性写法

1.2 利用变量来保存透明度的变化

1.3 代码

<!DOCTYPE html>
<html>

	<head>
		<style>
			/*用于兼容浏览器*/
			
			#img1 {
				/*IE*/
				filter: alpha(opacity: 30);
				/*FF和Chrome*/
				opacity: 0.3;
			}
		</style>
		<meta charset="UTF-8">
		<title>淡入淡出的图片</title>
		<script type="text/javascript">
			window.onload = function() {
				var oImg = document.getElementById('img1');
				oImg.onmouseover = function() {
					startMove('img1', 100);
				}
				oImg.onmouseout = function() {
					startMove('img1', 30);
				}
			}
			var timer = null;
			//因为获取图片的透明度比较难,所以利用一个变量来保存图片的透明度
			var alpha = 30;
			/**
			 * 
			 * @param {Object} objId 运动对象的id
			 * @param {Object} iTarget 运动的目标数值
			 */
			function startMove(objId, iTarget) {
				var oImg = document.getElementById(objId);
				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.filter = 'alpha(opacity:' + alpha + ')';
						oImg.style.opacity = alpha / 100;
					}
				}, 30);
			}
		</script>
	</head>

	<body>
		<img id="img1" src="Desert.jpg" />
	</body>

</html>

1.4 用到的图片