學習筆記 JavaScript 動畫 加速
![]()
![]()
<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>
