-
Notifications
You must be signed in to change notification settings - Fork 2
/
index8.html
109 lines (108 loc) · 3.26 KB
/
index8.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改进动画效果</title>
<!-- 加快移动速度 -->
<style>
#slideshadow{
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Web Design</h1>
<p>These are the things you should know.</p>
<ol id = "linklist">
<li><a>Structure</a></li>
<li><a>Presentation</a></li>
<li><a>Behavior</a></li>
</ol>
<div id = "slideshadow">
<img id = "preview" src="static/charac.jpg" alt="building blocks of web design"/>
</div>
<script type="text/javascript">
/*
把指针在标签a之间来回移动 会出现抖动的情况
是由变量作用域的问题导致的
在把moveMessage函数抽象化为moveElement函数的过程中，我们没有对变量movement做任何修改
*/
function addLoadEvent(func){
var oldEvent = window.onload;
if(typeof(oldEvent) != 'function'){
window.onload = func();
}else{
window.onload = function(){
oldEvent();
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);
var ypos = parseInt(elem.style.top);
var dist = 0;
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x){
dist = Math.ceil((final_x - xpos)/10);
xpos += dist;
}
if(xpos > final_x){
dist = Math.ceil((xpos - final_x)/10);
xpos -= dist;
}
if(ypos < final_x){
dist = Math.ceil((final_y - ypos)/10);
ypos += dist;
}
if(ypos > final_y){
dist = Math.ceil((ypos - final_y)/10);
ypos -= dist;
}
elem.style.left = xpos + 'px';
elem.style.top = ypos + 'px';
var repeat = "moveElement('" + elementID + "', " + final_x + ", " + final_y + ", " + interval + ")";
elem.movement = setTimeout(repeat,interval);
}
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);
</script>
</body>
</html>