js之动态改变透明度属性-opacity 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
		            width: 300px;
		            height: 300px;
		            background-color: red;
		            opacity: 0.3;/*0-1*/
		        }
		    </style>
		<script type="text/javascript">
			window.onload = function() {
				//由于opacity属性 的 值 太小了 所以没有办法和普通属性 通用
				var div = document.querySelector('div');
				var timer = null;
				div.onclick = function() {
					var cur = getStyle(div, 'opacity') * 100;
					//乘100 是为了适当放大，便于操作 最后设置属性值的时候 还要除回来
					timer = setInterval(function() {
						var step = (1 * 100 - cur) / 10; ///1是终点 由于起点扩大了100倍，终点也扩大100倍
						//处理步长
						step = step > 0 ? Math.ceil(step) : Math.floor(step);
						cur += step;
						//判断终点
						if (step > 0 && cur >= 100) {
							clearInterval(timer);
							cur = 100;
						} else if (step < 0 && cur <= 100) {
							clearInterval(timer);
							cur = 100;
						}
						//设置
						div.style.opacity = cur/100;
					}, 20)


				}

				function getStyle(ele, attr) {
					if (ele.currentStyle == undefined) {
						return getComputedStyle(ele)[attr];
					} else {
						return ele.currentStyle[attr];
					}
				}
			}
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

 

posted @ 2020-04-09 21:28  JackieDYH  阅读(57)  评论(0)  编辑  收藏  举报  来源