js之多物体同时运动动画效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}

			#s {
				top: 0;
				left: 110px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var divS = document.querySelectorAll('div');
				divS[0].onmouseover = function() {
					bufferMove(this, 'height', 500)
				}
				divS[1].onmouseover = function() {
					bufferMove(this, 'height', 500)
				}
				divS[0].onmouseout = function() {
					bufferMove(this, 'height', 100)
				}
				divS[1].onmouseout = function() {
					bufferMove(this, 'height', 100)
				}


				function bufferMove(ele, attr, target) {
					//起到
					if (attr == 'opacity') {
						var cur = getStyle(ele, attr) * 100;
					} else {
						var cur = parseInt(getStyle(ele, attr));
					}
					//清除定时器
					clearInterval(ele.timer);
					ele.timer = setInterval(function() {
						//步长
						var step = (target - cur) / 10;
						// 如果步长大于0 要向上取整， 步长小于0 要向下取整
						step = step > 0 ? Math.ceil(step) : Math.floor(step);
						cur += step;
						//判断终点
						if (step > 0 && cur >= target) {
							clearInterval(ele.timer);
							cur = target;
						} else if (step < 0 && cur <= target) {
							clearInterval(ele.timer);
							cur = target;
						}
						//设置
						if (attr == 'opacity') {
							ele.style[attr] = cur / 100;
						} else {
							ele.style[attr] = cur + 'px';
						}

					}, 20)
				}

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

 

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