原生JavaScript實現(xiàn)幻燈片效果
當(dāng)我們制作一個頁面時，尤其是制作一個首頁時，通常會設(shè)計一個可以鏈接到整個網(wǎng)站的其他主體頁面的導(dǎo)航欄，或者一段網(wǎng)站的介紹文字中會包含這頁面的跳轉(zhuǎn)，通常情況會使用title屬性為這些跳轉(zhuǎn)鏈接添加一些解釋性的文字，但是我們可以通過制作一個幻燈片的demo，加強用戶的體驗性。當(dāng)用戶的鼠標(biāo)移動到某一鏈接時，下方會出現(xiàn)對應(yīng)的圖片預(yù)覽，這樣即美化頁面，又大大增加了整個網(wǎng)站的交互性，下面就讓我們一起制作一個漂亮的幻燈片腳本吧。
準(zhǔn)備：在制作腳本之前，需要制作一張圖片，這張圖片應(yīng)該展示了所有預(yù)覽效果，如下圖：
index.html
制作有序列表，添加一些頁面鏈接
<body> <h1>簡單動畫制作</h1> <p>連接跳轉(zhuǎn)目標(biāo)展示</p> <ol id='list'> <li> <a href='http://www.hdgsjgj.cn/bcjs/list1.html' >First</a> </li> <li> <a href='http://www.hdgsjgj.cn/bcjs/list2.html' >Second</a> </li> <li> <a href='http://www.hdgsjgj.cn/bcjs/list3.html' >Third</a> </li> </ol> <!--動態(tài)添加的圖片展示區(qū)域>--><script src='http://www.hdgsjgj.cn/bcjs/script.js'></script></body>
style.css
為這個導(dǎo)航欄添加一些樣式
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
實現(xiàn)思路：
在建立腳本之前，我們先整理一下思路，確定我們要做什么？1. 新建一些節(jié)點用來展示預(yù)覽圖片2. 為a標(biāo)簽添加onmouseover事件3. 通過setTimeout()函數(shù)，和對圖片元素left、top偏移量（獲取設(shè)置的left top屬性時 要轉(zhuǎn)換稱整型）的移動完成動畫效果
/*共享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'); /*創(chuàng)建圖片展示區(qū)域*/ /*外層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','圖片預(yù)覽'); /*添加 使用insertAfter()函數(shù) 保證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); };}/*移動*參數(shù)的含義：圖片所在元素的id；圖片應(yīng)該向左移動的偏移量；上偏移量；時間*/function moveElement(elementID,left,top,interval){ /*向后兼容*/ if(!document.getElementById) return false; if(!document.getElementById(elementID)) return false; /*獲取圖片*/ var img = document.getElementById(elementID); /*判斷當(dāng)前元素是否已經(jīng)處在一個動畫函數(shù)中 *防止動畫堆積 */ if(img.moveNow){ /*清楚堆棧中的動畫*/ clearTimeout(img.moveNow); } /*判斷元素是否設(shè)置了left和top*/ if(!img.style.left){ img.style.left = '0px'; } if(!img.style.top){ img.style.top = '0px'; } /*獲取圖片當(dāng)前位置 *此時獲取的值是字符串格式,使用parseInt()強制轉(zhuǎn)化為字符串*/ var oldLeft = parseInt(img.style.left); var oldTop = parseInt(img.style.top); /*將當(dāng)前位置與目標(biāo)位置做比較*/ if(oldLeft == left && oldTop == top){ return true; } /*為了保證用戶體驗，當(dāng)移動的距離較大時應(yīng)該移動的快一些 *當(dāng)移動的距離比較小時，可以適當(dāng)慢一些 *根據(jù)相差的距離判斷移動的距離,每次移動相差距離的1/10 */ /*dist變量用于存儲當(dāng)前偏移量與目標(biāo)偏移量的距離*/ var dist = 0; if(oldLeft < left){ /*ceil()向上取整 防止小數(shù) 以及小于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'; /*調(diào)用函數(shù)*/ var result = 'moveElement(’'+elementID+'’,'+left+','+top+','+interval+')'; /*將執(zhí)行動畫的函數(shù)，設(shè)置成這個元素的一個屬性*/ img.moveNow = setTimeout(result,interval);}addLoadEvent(show);
最后執(zhí)行效果
此時，當(dāng)我們將鼠標(biāo)移動到不同列表項時，列表下的圖片就會移動到對應(yīng)的預(yù)覽圖位置。
到此，一個簡單的幻燈片demo就制作完成了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備