js鼠标悬浮动画：由一个位置移动到另外一个位置，速度由快变慢[修正版2]

1

#slideshow{width:100px;height:100px;position:relative; overflow:hidden;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Web Design</title>

<script src="addLoadEvent.js"></script>

<link rel="stylesheet" type="text/css" href="10.2.css" >

<script src="10.2.js"></script> 

</head>

<body>

<h1>Web Design</h1>

<p>These are the things you should know.</p>

<ol id="linklist">

<li><a href="structure.html">Structure</a></li>

<li><a href="presentation.html">Presentation</a></li>

<li><a href="behavior.html">Behavior</a></li>

</ol>

<div id="slideshow">

<img src="topics.gif" alt="building bolcks of web design" id="preview" />

</div>

</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83


function addLoadEvent(func){    //不管在页面加载完毕执行多少个函数，都应付自如

var oldonload = window.onload;

if(typeof window.onload != 'function'){
window.onload = func;

}else{

window.onload = function(){
oldonload();
func();
}
}
}
 
//加快速度，距离越远，速度越快，距离越近，速度越慢

 function moveElement(elementID,final_x,final_y,interval){

if(!document.getElementById) return false;

if(!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if(elem.movement){

clearTimeout(elem.movement);    //进行复位
}

var xpos = parseInt(elem.style.left); //parseInt(string)把字符串里面的数值信息提取出来，因为后面要进行很多算术比较操作。

var ypos = parseInt(elem.style.top);  //parseFloat(string)可以把带小数的数值（也就是浮点数）提取出来。

var dist = 0;

if(xpos == final_x && ypos == final_y){

return true;
}
 
 

if(xpos < final_x){

dist = Math.ceil(( final_x - xpos)/10);  //Math.ceil是向上取整函数，它返回的是大于或等于函数参数，并且与之最接近的整数，防止移动距离小于1像素.
xpos = xpos + dist;
}      

if(xpos > final_x){ 
dist = Math.ceil(( xpos - final_x)/10); 
xpos = xpos - dist;
}      

if(ypos < final_y){ 
dist = Math.ceil(( final_y - ypos)/10);
ypos = ypos + dist;
}       

if(ypos > final_y){ 
dist = Math.ceil(( ypos - final_y)/10);
ypos = ypos - dist;
}       
 
 

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";
//var  repeat = function() {moveElement(elementID, final_x,final_y,interval)} 

var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")"; 

elem.movement = setTimeout(repeat,interval); //为元素创建属性movement，element.property = value;
 
}
 
 

function prepareSlideshow(){
//确保浏览器支持DOM方法。

if(!document.getElementsByTagName) return false;

if(!document.getElementById) return false;
//确保元素存在。

if(!document.getElementById("linklist")) return false;

if(!document.getElementById("preview")) return false;
//为图片应用样式。

var preview = document.getElementById("preview");

preview.style.position = "absolute";

preview.style.left = "0px";

preview.style.top = "0px";
//取得列表中所有链接。

var list = document.getElementById("linklist");

var links = list.getElementsByTagName("a");
//为mouseover事件添加动画效果。

links[0].onmouseover = function(){

moveElement("preview",-100,0,10);
}

links[1].onmouseover = function(){

moveElement("preview",-200,0,10);
}

links[2].onmouseover = function(){

moveElement("preview",-300,0,10);
}
}
 
addLoadEvent(prepareSlideshow);

图片素材：

浏览器效果：

本文转自小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1783927