学习笔记 JavaScript 动画加速

╰+哭是因爲堅強的太久メ 2023-02-10 05:15 112阅读 0赞

[学习笔记 JavaScript 动画 加速][JavaScript _]

*  效果

![2020052012171474.png][]

*  代码中用到的图片

![20200520121741434.png][]

<html>
    	<head>
    		<style>
    			#imageDiv {
    				position: absolute;
    				top: 50px;
    				left: 65px;
    				width: 100px;
    				height: 100px;
    				border: 1px solid blue;
    				overflow: hidden;
    			}
    			li {
    				list-style: none;
    				float: left;
    				padding: 5px;
    			}
    		</style>
    		<script>
    			window.onload = function() {
    				var image  = document.getElementById("image");
    				image.style.position = "absolute";
    				image.style.top = "0px";
    				image.style.left = "0px";
    				//console.log(Math.ceil(0.8));
    				var aList = document.getElementsByTagName("a");
    				var index = new Array();
    				for (var i = 0; i < aList.length; i++) {
    					index[aList[i].innerHTML] = -(i + 1);
    					aList[i].onmouseover = function() {
    						moveImage("image", index[this.innerHTML], 15);
    					}
    				}
    			}
    			function moveImage(element, num, interval) {
    				var image = document.getElementById(element);
    				var current_left = parseInt(image.style.left);
    				var final_pos = num * 100;
    				var speed;
    				if (image.movement) {
    					clearTimeout(image.movement);
    				}
    				if (current_left == final_pos) {
    					return true;
    				}
    				// 0px > -100px
    				if (current_left > final_pos) {
    					// 0px - -100px / 10
    					speed = Math.ceil((current_left - final_pos) / 10);
    					// 0px + 10
    					current_left = current_left + (-speed);
    					//alert(current_left);
    				}
    				// -200px < -100px
    				if (current_left < final_pos) {
    					// -100px - -200px
    					speed = Math.ceil((final_pos - current_left) / 10);
    					// -200px + 10
    					current_left = current_left + (speed);
    				}
    				image.style.left = current_left + "px";
    				var repeat = "moveImage('" + element + "', " + num + ", " + interval + ");";
    				image.movement = setTimeout(repeat, interval);
    			}
    		</script>
    	</head>
    	<body>
    		<ol>
    			<li>
    				<a href="#">DOG</a>
    			</li>
    			<li>
    				<a href="#">CAT</a>
    			</li>
    			<li>
    				<a href="#">FISH</a>
    			</li>
    			<li>
    				<a href="#">DUCK</a>
    			</li>
    			<li>
    				<a href="#">PIG</a>
    			</li>
    			<li>
    				<a href="#">MONKY</a>
    			</li>
    			<li>
    				<a href="#">BIRD</a>
    			</li>
    		</ol>
    		<div id="imageDiv">
    			<img src="all.png" alt="all.png" id="image"></img>
    		</div>
    	</body>
    </html>

[JavaScript _]: https://blog.csdn.net/InJavaWeTrust/article/details/106233255
[2020052012171474.png]: https://img-blog.csdnimg.cn/2020052012171474.png
[20200520121741434.png]: https://img-blog.csdnimg.cn/20200520121741434.png