JavaScript：运动模型之淡入淡出效果

div结构、样式，可以替换成其他标签

<body>
<div id="div1">
	<li>空间</li>
	<li>微信</li>
	<li>微博</li>
	<li>空间</li>
	<li>微信</li>
	<li>微博</li>
</div>
</body>

淡入淡出事件

	window.onload = function(){
		var oDiv = document.getElementById('div1');

		oDiv.onmouseover = function(){
			startMove(100);
		};
		oDiv.onmouseout = function(){
			startMove(30);
		};
	};

淡入淡出事件函数

	var timer = null;
	var alpha = 30;
    //aipha用来存放变化过程中的变量，最终将赋值给透明度opacity
	function startMove(target){
		var oDiv = document.getElementById('div1');
		var speed;
		if(alpha<target){
			speed = 2;
		}
		else{
			speed = -2;
		}
		clearInterval(timer);
		timer = setInterval(function(){
			if (alpha == target) {
				clearInterval(timer);
			} else {
				alpha = alpha+speed;
				console.log(alpha);
				oDiv.style.opacity = alpha/100;
			}
		},30);
	}

完整示例代码

<!DOCTYPE html>
<html>
<head>
	<title>淡入淡出</title>
<style type="text/css">
	*{margin: 0px;padding: 0px;}
	li{font-size: 22px;}
	#div1{
		width: 100px;
		height: 200px;
		margin: 200px auto;
		background-color: red;
		color: white;
		opacity: 0.3;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var oDiv = document.getElementById('div1');

		oDiv.onmouseover = function(){
			startMove(100);
		};
		oDiv.onmouseout = function(){
			startMove(30);
		};
	};
	 //aipha用来存放变化过程中的变量，最终将赋值给透明度opacity
	var timer = null;
	var alpha = 30;
	function startMove(target){
		var oDiv = document.getElementById('div1');
		var speed;
		if(alpha<target){
			speed = 2;
		}
		else{
			speed = -2;
		}
		clearInterval(timer);
		timer = setInterval(function(){
			if (alpha == target) {
				clearInterval(timer);
			} else {
				alpha = alpha+speed;
				console.log(alpha);
				oDiv.style.opacity = alpha/100;
			}
		},30);
	}
</script>
</head>
<body>
<div id="div1">
	<li>空间</li>
	<li>微信</li>
	<li>微博</li>
	<li>空间</li>
	<li>微信</li>
	<li>微博</li>
</div>
</body>
</html>

效果

注意事项：opacity一般是用0.0~1.0的小数表示，但是这儿使用0~100的正整数表示，最终除以100，得到小数。因为chrome的内核在计算浮点数加减法时，使用的是高精度的小数，使得1.0 - 0.3=6.99999999999999999等精度问题发生，影响if判断。故而直接使用整数进行计算。

posted @ 2020-02-11 12:05  昨夜昙花  阅读(10)  评论(0)    收藏  举报