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