javascript 动画效果（多物体缓冲运动,多物体透明度变化，匀速移入移出、链式运动、同时运动）

多物体缓冲运动

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>多物体缓冲运动</title>
		<style>
			ul,
			li {
				list-style: none;
			}

			ul li {
				width: 200px;
				height: 100px;
				background: red;
				margin-bottom: 20px;
			}
		</style>

		<script>
			window.onload = function() {
				var aLi = document.getElementsByTagName("li");
				for (var i = 0; i < aLi.length; i++) {
					// 存在连续选择li元素不恢复的bug，所以需要给每个li清除定时器
					aLi[i].timer = null;
					aLi[i].onmouseover = function() {
						startMove(this, 400);
					}
					aLi[i].onmouseout = function() {
						startMove(this, 200);
					}
				}
				// 代表执行一个动画, 第一个参数代表所要执行的对象, 第二个参数代表所要执行对象的宽度
				function startMove(obj, iTarget) {
					clearInterval(obj.timer);
					obj.timer = setInterval(function() {
						// 想要改变li 元素的宽度，但不知道是哪一个，可以传一个参数obj来指定当前选中的 这个li元素
						var speed = (iTarget - obj.offsetWidth) / 8;
						// 涉及到运动的速度计算需要进行向上向下的取判断
						speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
						if (obj.offsetWidth == iTarget) {
							clearInterval(obj.timer);
						} else {
							obj.style.width = obj.offsetWidth + speed + "px";
						}
					}, 30)
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

多物体透明度修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS动画之多物体透明度修改</title>
    <style>
      *{padding: 0;margin: 0;}

      div{
          width: 200px;
          height: 100px;
          background: red;
          float: left;
          margin: 10px;
          opacity: 0.3;
      }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementsByTagName("div");
            for(var i=0; i<oDiv.length; i++){

             // 给每个div元素各自清除定时器仍存在bug，是因为之前设置了统一的透明度值，多物体运动中只能分别设置   
              oDiv[i].alpha=30;
              oDiv[i].onmouseover=function(){
                startMove(this,100);
              };
              oDiv[i].onmouseout=function(){
                startMove(this,30);
              }
            }
        }

        // var alpha=30;
        function startMove(obj,iTarget){
            clearInterval(obj.timer);

            obj.timer=setInterval(function(){
                var speed=0;
                if(obj.alpha>iTarget){
                    speed=-5;
                }else{
                    speed=5;
                }
                if(obj.alpha == iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.alpha += speed;
                    obj.style.opacity=obj.alpha/100;
                }  
            },30);
        }
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</body>
</html>

移入移出

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>JS动画-移入移出</title>
		<style type="text/css">
			div {
				width: 250px;
				height: 30px;
				background-color: red;
				position: absolute;
				left: -200px;
				top: 50px;
			}

			span {
				float: right;
				color: #fff;
				color: blue
			}
		</style>
		<script>
			window.onload = function() {
				var oDiv = document.getElementById("div");
				oDiv.onmouseover = function() {
					startMove(0);
				};
				oDiv.onmouseout = function() {
					startMove(-200);
				}
			}

			var timer = null;
			//不加会出错,清空样式
			function startMove(iTarget) {
				clearInterval(timer);
				var oDiv = document.getElementById("div");
				timer = setInterval(function() {
					var speed = 0;
					if (oDiv.offsetLeft > iTarget) {
						speed = -5;
					} else {
						speed = 5;
					}
					if (oDiv.offsetLeft == iTarget) {
						clearInterval(timer);
					} else {
						oDiv.style.left = oDiv.offsetLeft + speed + "px";
					}
				}, 30);
			}
		</script>
	</head>
	<body>
		<div id="div">
			<span>share</span>
		</div>
	</body>
</html>

链式运动

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>链式运动</title>
		<style>
			div {
				width: 200px;
				height: 100px;
				border: 1px solid black;
				background: red;
				filter: alpha(opacity=30);
				opacity: 0.3;
			}
		</style>
		<script src="move.js"></script>
		<script>
			window.onload = function() {
				var oDiv = document.getElementById("div");
				oDiv.onmouseover = function() {
					startMove(oDiv, "width", 400, function() {
						startMove(oDiv, "height", 200, function() {
							startMove(oDiv, "opacity", 100);
						})
					})
				};
				oDiv.onmouseout = function() {
					startMove(oDiv, "opacity", 30, function() {
						startMove(oDiv, "height", 100, function() {
							startMove(oDiv, "width", 200);
						})
					})
				}
			}
			/* 获得样式 */
			function getStyle(obj, attr) {
				if (obj.currentStyle) {
					return obj.currentStyle[attr];
				} else {
					return getComputedStyle(obj, null)[attr];
				}
			}

			function startMove(obj, attr, iTarget, fun) {
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					// 取当前值
					var icur = 0;
					if (attr == "opacity") {
						icur = parseFloat(getStyle(obj, attr)) * 100;
					} else {
						icur = parseInt(getStyle(obj, attr));
					}
					// 计算速度
					var speed = (iTarget - icur) / 8;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					// 检测停止
					if (icur == iTarget) {
						clearInterval(obj.timer);
						if (fun) { //当存在第四个参数fun时，调用这个fun函数
							fun();
						}
					} else {

						if (attr == "opacity") {
							obj.style.filter = "alpha(opacity=)" + (icur + speed) + ")";
							obj.style.opacity = (icur + speed) / 100;
						} else {
							obj.style[attr] = icur + speed + "px";
						}

					}
				}, 30)
			}
		</script>
	</head>
	<body>
		<div id="div"></div>
	</body>
</html>

同时运动

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>链式运动</title>
		<style>
			div {
				width: 200px;
				height: 100px;
				border: 1px solid black;
				background: red;
				filter: alpha(opacity=30);
				opacity: 0.3;
			}
		</style>
		<script src="move.js"></script>
		<script>
			window.onload = function() {
				var oDiv = document.getElementById("div");
				oDiv.onmouseover = function() {
					startMove(oDiv, {
						width: 205,
						height: 200,
						opacity: 100
					});
				}
				oDiv.onmouseout = function() {
					startMove(oDiv, {
						width: 200,
						height: 100,
						opacity: 30
					});
				}
			}

			function getStyle(obj, attr) {
				if (obj.currentStyle) {
					return obj.currentStyle[attr];
				} else {
					return getComputedStyle(obj, false)[attr];
				}
			}

			// 修改attr,iTarget为json
			function startMove(obj, json, fun) {
				var flage = true;
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					// 循环json中每个对值进行运动
					for (var attr in json) {
						// 取当前值
						var icur = 0;
						if (attr == "opacity") {
							icur = parseFloat(getStyle(obj, attr)) * 100;
						} else {
							icur = parseInt(getStyle(obj, attr));
						}
						// 计算速度
						var speed = (json[attr] - icur) / 8;
						speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
						// 检测停止
						if (icur != json[attr]) {
							flage = false;
						}
						if (attr == "opacity") {
							obj.style.filter = "alpha(opacity=)" + (icur + speed) + ")";
							obj.style.opacity = (icur + speed) / 100;
						} else {
							obj.style[attr] = icur + speed + "px";
						}
						if (flage) {
							clearInterval(obj.timer);
							if (fun) {
								fun();
							}
						}
					}
				}, 30)
			}
		</script>
	</head>
	<body>
		<div id="div"></div>
	</body>
</html>

posted @ 2022-04-02 09:48 coderwcb 阅读(35) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部