當我們制作一個頁面時，尤其是制作一個首頁時，通常會設計一個可以鏈接到整個網站的其他主體頁面的導航欄，或者一段網站的介紹文字中會包含這頁面的跳轉，通常情況會使用title屬性為這些跳轉鏈接添加一些解釋性的文字，但是我們可以通過制作一個幻燈片的demo，加強用戶的體驗性。當用戶的鼠標移動到某一鏈接時，下方會出現對應的圖片預覽，這樣即美化頁面，又大大增加了整個網站的交互性，下面就讓我們一起制作一個漂亮的幻燈片腳本吧。
準備：在制作腳本之前，需要制作一張圖片，這張圖片應該展示了所有預覽效果，如下圖：
index.html
制作有序列表，添加一些頁面鏈接
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<body> <h1>簡單動畫制作</h1> <p>連接跳轉目標展示</p> <ol id="list"> <li> <a href="list1.html" >First</a> </li> <li> <a href="list2.html" >Second</a> </li> <li> <a href="list3.html" >Third</a> </li> </ol> <!--動態添加的圖片展示區域>--><script src="script.js"></script></body> |
style.css
為這個導航欄添加一些樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
ol{ padding-left: 20px;}ol li{ display: inline; margin-right: 10px;}#view{ width: 600px; height: 200px; position: absolute;}#slideShow{ width: 200px; height: 200px; overflow: hidden; position: relative;} |
script.js
實現思路：
在建立腳本之前，我們先整理一下思路，確定我們要做什么？
1. 新建一些節點用來展示預覽圖片
2. 為a標簽添加onmouseover事件
3. 通過setTimeout()函數，和對圖片元素left、top偏移量（獲取設置的left top屬性時 要轉換稱整型）的移動完成動畫效果
|
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
/*共享load*/function addLoadEvent(fun){ var oldLoad = window.onload; if(typeof oldLoad != "function"){ window.onload = fun; }else{ window.onload = function(){ oldLoad(); fun(); } }}/*insertAfter*/function insertAfter(newNode,oldNode){ var parent = oldNode.parentNode; if(parent.lastChild == oldNode){ parent.appendChild(newNode); }else{ parent.insertBefore(newNode,oldNode.nextSibling); }}function show(){ /*向后兼容*/ if(!document.getElementById) return false; if(!document.getElementsByTagName) return false; if(!document.createElement) return false; /*獲取列表清單*/ var list = document.getElementById("list"); /*創建圖片展示區域*/ /*外層div*/ var div = document.createElement("div"); div.setAttribute("id","slideShow"); /*img*/ var img = document.createElement("img"); img.setAttribute("id","view"); img.setAttribute("src","image.jpg"); img.setAttribute("alt","圖片預覽"); /*添加 使用insertAfter()函數 保證div緊跟在list列表之后*/ insertAfter(div,list); div.appendChild(img); /*綁定事件*/ var a = list.getElementsByTagName("a"); a[0].onmouseover =function(){ moveElement("view",0,0,10); }; a[1].onmouseover = function(){ moveElement("view",-200,0,10); }; a[2].onmouseover = function(){ moveElement("view",-400,0,10); };}/*移動*參數的含義：圖片所在元素的id；圖片應該向左移動的偏移量；上偏移量；時間*/function moveElement(elementID,left,top,interval){ /*向后兼容*/ if(!document.getElementById) return false; if(!document.getElementById(elementID)) return false; /*獲取圖片*/ var img = document.getElementById(elementID); /*判斷當前元素是否已經處在一個動畫函數中 *防止動畫堆積 */ if(img.moveNow){ /*清楚堆棧中的動畫*/ clearTimeout(img.moveNow); } /*判斷元素是否設置了left和top*/ if(!img.style.left){ img.style.left = "0px"; } if(!img.style.top){ img.style.top = "0px"; } /*獲取圖片當前位置 *此時獲取的值是字符串格式,使用parseInt()強制轉化為字符串*/ var oldLeft = parseInt(img.style.left); var oldTop = parseInt(img.style.top); /*將當前位置與目標位置做比較*/ if(oldLeft == left && oldTop == top){ return true; } /*為了保證用戶體驗，當移動的距離較大時應該移動的快一些 *當移動的距離比較小時，可以適當慢一些 *根據相差的距離判斷移動的距離,每次移動相差距離的1/10 */ /*dist變量用于存儲當前偏移量與目標偏移量的距離*/ var dist = 0; if(oldLeft < left){ /*ceil()向上取整 防止小數 以及小于1的情況*/ dist = Math.ceil((left-oldLeft)/10); oldLeft = oldLeft+dist; } if(oldLeft > left){ dist = Math.ceil((oldLeft-left)/10); oldLeft = oldLeft - dist; } if(oldTop < top){ dist = Math.ceil((top-oldTop)/10); oldTop = oldTop+dist; } if(oldTop > top){ dist = Math.ceil((oldTop-top)/10); oldTop = oldTop - dist; } /*移動*/ img.style.left = oldLeft+"px"; img.style.top = oldTop+"px"; /*調用函數*/ var result = "moveElement('"+elementID+"',"+left+","+top+","+interval+")"; /*將執行動畫的函數，設置成這個元素的一個屬性*/ img.moveNow = setTimeout(result,interval);}addLoadEvent(show); |
最后執行效果
此時，當我們將鼠標移動到不同列表項時，列表下的圖片就會移動到對應的預覽圖位置。
到此，一個簡單的幻燈片demo就制作完成了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/zm_nizhi/article/details/74905869
