|
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
|
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)可以把带小数的数值（也就是浮点数）提取出来。
if
(xpos == final_x && ypos == final_y){
return
true
;
}
if
(xpos < final_x){ xpos++;}
//如果xpos小于终点的left,给它加1.
if
(xpos > final_x){ xpos--;}
//如果xpos大于终点的left,给它减1.
if
(ypos < final_y){ ypos++;}
//如果ypos小于终点的left,给它加1.
if
(ypos > final_y){ ypos--;}
//如果ypos大于终点的left,给它减1.
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/1783925
