学习笔记 JavaScript 动画

偏执的太偏执、 2023-02-10 01:20 80阅读 0赞

[ 学习笔记 JavaScript 动画][JavaScript]

结果

![20200519164054155.png][]

代码里用到的图片

![2020051916411385.png][]

<html>
    	<head>
    		<style>
    			#imageDiv {
    				height: 100px;
    				width: 100px;
    				top: 50px;
    				left: 60px;
    				position: absolute;
    				overflow: hidden;
    				border: 1px solid blue;
    			}
    			li {
    				list-style: none;
    				float: left;
    				padding: 5px;
    			}
    		</style>
    		<script>
    			window.onload = function() {
    				var image = document.getElementById("image");
    				image.style.top = "0px";
    				image.style.left = "0px";
    				image.style.position = "absolute";
    				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], 5);
    					}
    				}
    				
    
    			}
    			function moveImage(element, num, interval) {
    				var image = document.getElementById(element);
    				var target_left =  parseInt(image.style.left);
    				if (target_left == (num * 100)) {
    					return true;
    				}
    				if (target_left > (num * 100)) {
    					target_left--;
    				}
    				if (target_left < (num * 100)) {
    					target_left++;
    				}
    				image.style.left = target_left + "px";
    				var repeat = "moveImage('" + element + "', " + num + ", " + interval + ");";
    				setTimeout(repeat, interval);
    		
    			}
    		</script>
    	</head>
    	<body>
    		<ul>
    			<li>
    				<a href="">DOG</a>
    			</li>
    			<li>
    				<a href="">CAT</a>
    			</li>
    			<li>
    				<a href="">FISH</a>
    			</li>
    		</ul>
    		<div id="imageDiv">
    			<img src="all.png" alt="all.png" id="image"></img>
    		</div>
    	</body>
    </html>

[JavaScript]: https://blog.csdn.net/InJavaWeTrust/article/details/106217799
[20200519164054155.png]: https://img-blog.csdnimg.cn/20200519164054155.png
[2020051916411385.png]: https://img-blog.csdnimg.cn/2020051916411385.png