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

- 日理万妓 2021-11-05 05:00 228阅读 0赞

#### 多物体缓冲运动 ####

<!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>