當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JavaScript 进阶知识 - 特效篇(一)

發(fā)布時(shí)間：2023/12/20 javascript 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript 进阶知识 - 特效篇(一) 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

JS特效

前言

經(jīng)過(guò)前面幾篇文章的講解，相信大家已經(jīng)會(huì)操作DOM和BOM了。為什么前面要花那么多精力去講DOM呢？因?yàn)樵诤竺娴膶W(xué)習(xí)、工作中，會(huì)大量的使用DOM操作，一個(gè)表格需要增、刪、改、查，一個(gè)圖片需要改變大小..等，如果你想要?jiǎng)討B(tài)的改變這些，必須要學(xué)會(huì)使用DOM。

為了鞏固前面的知識(shí)點(diǎn)，并且能夠熟練地使用它們，這里單獨(dú)寫了一篇《JavaScript 進(jìn)階知識(shí) - 特效篇》。本篇文章作為進(jìn)階篇很重要，不單單是對(duì)前面知識(shí)點(diǎn)的運(yùn)用，期間也會(huì)有大量的新知識(shí)點(diǎn)注入，所以希望小伙伴們繼續(xù)加油，認(rèn)真閱讀。

在本篇文章中主要會(huì)講解一些案例，比如我們平時(shí)在頁(yè)面中碰到的一些特效，一些動(dòng)畫效果。

注意： 所有的案例都在這里鏈接: 提取密碼密碼: 70ny，文章中的每個(gè)案例后面都有對(duì)應(yīng)的序號(hào)。

1. offset 系列

offset系列用于用于獲取元素自身的大小和位置，在網(wǎng)頁(yè)特效中有廣泛應(yīng)用。offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop。

1.1 offsetWidth 和 offsetHeight

offsetWidth 和 offsetHeight獲取的是元素的真實(shí)寬高

獲取的是元素真實(shí)的高度和寬度
獲取到的是數(shù)值類型，方便計(jì)算
offsetHeight與offsetWidth是只讀屬性，不能設(shè)置。

示例代碼：獲取一個(gè)盒子的真實(shí)寬高 [01-offset系列-offsetWidth&Height.html]

<style>div {width: 200px;height: 100px;background-color: pink;padding: 10px;border: 10px solid salmon;margin: 10px;} </style> <div id="box"></div> <script>var box = document.getElementById('box');// offsetWidth是一個(gè)通過(guò)計(jì)算后得到的值， padding + border + widthconsole.log(box.offsetWidth); // 240console.log(box.offsetHeight); // 140 </script>

offsetWidth是一個(gè)通過(guò)計(jì)算后得到的值， padding + border + width

思考： 之前我們不是也可以通過(guò)style來(lái)獲取樣式嗎？他們有什么不同

style.height與style.width只能獲取到行內(nèi)樣式里的width和height

獲取的是字符串類型，還需要轉(zhuǎn)換成數(shù)值類型
寫在css樣式里的寬高是獲取不到的，只能獲取行內(nèi)樣式

總結(jié)：

設(shè)置寬度高度使用style.width與style.height
獲取寬度和高度offsetWidth與offsetHeight
offset獲取的寬高包括padding、border

1.2 offsetParent

parentNode和offsetParent

parentNode始終是父元素
offsetParent是離當(dāng)前元素最近的定位元素(absolute、relative)，如果沒(méi)有，那就找body

示例代碼： [02-offset系列-offsetParent.html]

<style>#father {width: 500px;height: 500px;background-color: #FF9F68;}#son {width: 300px;height: 300px;background-color: #FEFF89;}#grandson {width: 100px;height: 100px;background-color: #AC005D;position: absolute;left: 100px;right: 100px;} </style> <div id="father"><div id="son"><div id="grandson"></div></div> </div> <script>var grandSon = document.getElementById("grandson");// 找父節(jié)點(diǎn) 親爹console.log(grandSon.parentNode); // 返回<div id="son"></div>// 找最近有定位的爹,如果找不到，會(huì)找bodyconsole.log(grandSon.offsetParent); // 返回<body></body> </script>

1.3 offsetLeft與offsetTop

offsetLeft: 自身左側(cè)到offsetParent左側(cè)的距離：left + margin

offsetTop: 自身頂部到offsetParent頂部的距離 : top + margin

元素自身與offsetParent真實(shí)的距離
獲取到的是數(shù)值類型，方便計(jì)算
只讀屬性，只能獲取，不能設(shè)置

示例代碼：獲取一個(gè)盒子距父盒子的距離 [03-offset系列-offsetTop&Left.html]

<style>#father {width: 400px;height: 400px;background-color: pink;position: relative;margin-left: 100px;}#son {width: 200px;height: 200px;background-color: skyblue;position: absolute;left: 100px;margin: 20px;} </style> <div id="father"><div id="son"></div> </div> <script>//offsetLeft與offsetTopvar son = document.getElementById("son");console.log(son.offsetLeft); // 120console.log(son.offsetTop); // 20 </script>

思考： 之前我們不是也可以通過(guò)style來(lái)獲取樣式嗎？他們有什么不同

style.top與style.left只能獲取到行內(nèi)樣式里的top和left

獲取的是字符串類型，還需要轉(zhuǎn)換成數(shù)值類型
寫在css樣式里的寬高是獲取不到的，只能獲取行內(nèi)樣式

總結(jié)：

設(shè)置定位left/top使用style.left與style.top
獲取定位left/top使用offsetLeft與offsetTop
offset獲取的位置包括margin
如果父元素沒(méi)有定位，獲取的就是相對(duì)body的

一張圖看清offset系列

2. 勻速動(dòng)畫框架

2.1 勻速動(dòng)畫初體驗(yàn)

如何讓一個(gè)物體動(dòng)起來(lái)？動(dòng)畫函數(shù)的實(shí)現(xiàn)原理其實(shí)就是利用間歇定時(shí)器每隔一段時(shí)間執(zhí)行一次的原理實(shí)現(xiàn)的。

1、讓一個(gè)物體動(dòng)起來(lái)

點(diǎn)擊按鈕讓一個(gè)盒子勻速往右執(zhí)行一段距離：[04-勻速動(dòng)畫初體驗(yàn)(一).html]

<style>* {margin: 0;padding: 0;}#box {width: 100px;height: 100px;background-color: hotpink;position: absolute;} </style> <button id="btn">奔跑吧</button> <div id="box"></div> <script>var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function() {setInterval(function() {// 定義一個(gè)距離相當(dāng)于每一次要跑的距離 stepvar step = 5;// 定義一個(gè)當(dāng)前位置 leadervar leader = box.offsetLeft;// 每次執(zhí)行的時(shí)候讓leader都走step距離leader = leader + step;// 將距離賦值給boxbox.style.left = leader + "px";// 每15ms 就執(zhí)行一次人眼視覺(jué)停留就有動(dòng)畫效果了}, 15);} </script>

效果圖：

BUG： 不知道細(xì)心的小伙伴有沒(méi)有發(fā)現(xiàn)兩個(gè)問(wèn)題

現(xiàn)在執(zhí)行的時(shí)候是不會(huì)停下來(lái)的，一直往右跑
點(diǎn)擊按鈕之后再去點(diǎn)擊，會(huì)發(fā)現(xiàn)，按鈕點(diǎn)擊次數(shù)越多，盒子速度越快

2、讓一個(gè)物體動(dòng)起來(lái)，解決bug

我們讓盒子運(yùn)動(dòng)到500px的位置停下來(lái) [05-勻速動(dòng)畫初體驗(yàn)(二).html]

效果圖：

總結(jié)：

setInterval間歇定時(shí)器，如果不手動(dòng)清除，它就會(huì)一直運(yùn)行下去
點(diǎn)擊事件觸發(fā)定時(shí)器一定要注意，一進(jìn)來(lái)就清除一次，否則會(huì)越點(diǎn)越快

2.2 勻速動(dòng)畫函數(shù)封裝

函數(shù)需要獨(dú)立，就不能使用全局變量。timer之前是一個(gè)全局變量，如果不獨(dú)立，頁(yè)面只有一個(gè)定時(shí)器在運(yùn)作。封裝的函數(shù)里將timer綁定給調(diào)用定時(shí)器的元素，這樣就獨(dú)立了。

1、封裝一個(gè)動(dòng)畫函數(shù) [06-封裝一個(gè)勻速動(dòng)畫函數(shù).html]

<button id="btn">奔跑吧,500</button> <button id="btn2">奔跑吧,1000</button> <div id="box"></div> <script>var btn = document.getElementById('btn');var btn2 = document.getElementById('btn2');var box = document.getElementById('box');/**既然是封裝的函數(shù)，有些不確定的，經(jīng)常變的元素就要提出來(lái)比如: 1.每一次改變的距離 num2.調(diào)用動(dòng)畫的對(duì)象 box ==> element 3.運(yùn)動(dòng)的目標(biāo)距離 500 ==> target*/// 封裝一個(gè)動(dòng)畫函數(shù)function animate(element, target,num) {// 一進(jìn)來(lái)就清除定時(shí)器// 函數(shù)需要獨(dú)立，就不能使用全局變量所以將timer綁定在element上clearInterval(element.timer);element.timer = setInterval(function() {// 定義一個(gè)距離相當(dāng)于每一次要跑的距離 stepvar step = num;// 定義一個(gè)當(dāng)前位置 leadervar leader = element.offsetLeft;if (leader < target) {// 每次執(zhí)行的時(shí)候讓leader都走step距離leader = leader + step;// 將距離賦值給boxelement.style.left = leader + "px";} else {clearInterval(element.timer);}}, 15);}// 點(diǎn)擊按鈕1 移動(dòng)到500px的位置btn.onclick = function() {animate(box, 500, 9);}// 點(diǎn)擊按鈕2 移動(dòng)到1000px的位置btn2.onclick = function() {animate(box, 1000, 5);} </script>

注意： 上面的案例我們只是簡(jiǎn)單的實(shí)現(xiàn)了一個(gè)動(dòng)畫的封裝效果，但是作為一個(gè)以后會(huì)經(jīng)常用的函數(shù)，上面的代碼還有很多需要優(yōu)化的地方

1、上面的函數(shù)只能往正方向跑，也就是說(shuō)去到1000，想讓它回到500是不好實(shí)現(xiàn)的；
2、如果每次走的距離是5，目標(biāo)距離是500，正好能整除。假如每次走的是9呢？每次走9，是不能被500整除的，所以最后停下里的距離會(huì)偏多一點(diǎn)。

2、封裝一個(gè)動(dòng)畫函數(shù)完整版 [07-封裝一個(gè)勻速動(dòng)畫函數(shù)完整版.html]

先說(shuō)說(shuō)第二個(gè)問(wèn)題，距離的問(wèn)題。如果走的距離不能被目標(biāo)距離整除的話，最后會(huì)多出來(lái)一點(diǎn)距離，我們可以不用管這個(gè)距離，直接在清除定時(shí)器，停下里的時(shí)候讓它的距離等于目標(biāo)距離。

clearInterval(element.timer); // 清除前位置在504，直接在下面設(shè)置讓它位置等于500 element.style.left = target + "px"; // 500

現(xiàn)在說(shuō)說(shuō)第一個(gè)問(wèn)題，盒子到1000的時(shí)候不能回到500。假設(shè)現(xiàn)在盒子在1000，我們點(diǎn)擊按鈕1的時(shí)候想要讓他回到500，這個(gè)時(shí)候我們可以發(fā)現(xiàn)時(shí)的leader = 1000，目標(biāo)距離target為500，就是說(shuō)當(dāng)leader>target的時(shí)候，盒子是可以往回走的,這時(shí)候只要將步數(shù)設(shè)置為負(fù)數(shù) ，盒子就是往回跑的。

var leader = element.offsetLeft; // 當(dāng)目標(biāo)距離大于當(dāng)前位置說(shuō)明往正方向走 step的值就是正的 var step = target > leader? 9 : -9;

此時(shí)就不能再根據(jù) if (leader < target){}, else { clearInterval(element.timer); }去判斷，讓盒子運(yùn)動(dòng)了。這時(shí)的判斷條件應(yīng)該是目標(biāo)距離target 與盒子目前距離leader之間差的絕對(duì)值大于等于一步距離step絕對(duì)值的時(shí)候，讓他們執(zhí)行l(wèi)eader = leader + step;否則的話清除清除定時(shí)器，并將最后的距離直接設(shè)置為target的距離。

var distance = Math.abs(target - leader); // 通過(guò)判斷此時(shí)的差如果大于或者等于一步的距離step的時(shí)候，就應(yīng)該執(zhí)行動(dòng)畫 if (distance >= Math.abs(step)) {leader = leader + step;element.style.left = leader + "px"; }

完整代碼：

<button id="btn">奔跑吧,500</button> <button id="btn2">奔跑吧,1000</button> <div id="box"></div> <script>var btn = document.getElementById('btn');var btn2 = document.getElementById('btn2');var box = document.getElementById('box');function animate(element, target, num) {clearInterval(element.timer);element.timer = setInterval(function() {var leader = element.offsetLeft;// 判斷此時(shí)每次走的距離，當(dāng)目標(biāo)距離大于當(dāng)前位置說(shuō)明往正方向走 step的值就是正的var step = target > leader ? num : -num;// 獲得此時(shí)的距離與目標(biāo)距離的差的絕對(duì)值var distance = Math.abs(target - leader);// 通過(guò)判斷此時(shí)的差如果大于或者等于一步的距離step的時(shí)候，就應(yīng)該執(zhí)行動(dòng)畫if (distance >= Math.abs(step)) {leader = leader + step;element.style.left = leader + "px";} else {// 否則清除動(dòng)畫，并且將最后的距離設(shè)置為target的距離clearInterval(element.timer);element.style.left = target + "px";}}, 15);}btn.onclick = function() {animate(box, 500, 9);}btn2.onclick = function() {animate(box, 1000, 5);} </script>

效果圖：

如上，這就是封裝的一個(gè)完美的動(dòng)畫函數(shù)了，下次有需要用到動(dòng)畫的地方，直接引用即可——[ js/animate.js ]

3. 輪播圖

基本上每個(gè)網(wǎng)站都會(huì)用到輪播圖，輪播圖的使用可以說(shuō)是必不可少的。以后我們用的最多的可能是插件，原生的可能并不常用，但是輪播圖的原理我們必須知道，并且能夠?qū)懗鰜?lái)。(之前一次面試就是讓我講出輪播圖的具體實(shí)現(xiàn)步驟)

3.1 簡(jiǎn)單輪播圖

現(xiàn)在我們先來(lái)學(xué)習(xí)下簡(jiǎn)單的輪播圖實(shí)現(xiàn)原理。

輪播圖樣式的特點(diǎn)：

ul要足夠的寬，要求能夠一行放下所有的li
父盒子的寬高和圖片的寬高一樣
父盒子要有一個(gè)overflow:hidden ,僅顯示一張圖片，不多不少

要求ul很寬很寬，因?yàn)樗械膌i要左浮動(dòng)，要保證所有的li在一行上顯示，定義一個(gè)盒子，盒子的寬高要和顯示的單張圖片寬高一樣，然后設(shè)置overflow:hidden這樣其他的li就會(huì)被隱藏在下面，通過(guò)改變ul的位置就能實(shí)現(xiàn)圖片的切換了

示例代碼： [08-實(shí)現(xiàn)簡(jiǎn)單的輪播圖.html]

效果圖：

從上面效果圖中，我們可以看到，一個(gè)最簡(jiǎn)單的輪播圖已經(jīng)成型了，但是需要去用手點(diǎn)擊，而且如果跨點(diǎn)數(shù)去點(diǎn)擊，會(huì)發(fā)現(xiàn)圖片要一張張滑過(guò)去，這里后面我們會(huì)優(yōu)化。

3.2 左右焦點(diǎn)輪播圖

左右焦點(diǎn)輪播圖，就是在顯示圖片的兩端添加兩個(gè)按鈕，一個(gè)向左，一個(gè)向右，點(diǎn)擊的時(shí)候圖片會(huì)根據(jù)點(diǎn)擊的方向滑動(dòng)。并且當(dāng)鼠標(biāo)懸停在顯示區(qū)域的時(shí)候，兩個(gè)按鈕顯示。鼠標(biāo)離開(kāi)顯示區(qū)域，，兩個(gè)按鈕隱藏。

示例代碼： [09-左右焦點(diǎn)輪播圖.html]

效果圖：

3.3 無(wú)縫輪播圖

上圖可以看到，當(dāng)滑到最左邊或者最右邊的時(shí)候，再點(diǎn)擊就沒(méi)有用了，正常的輪播圖肯定不是這樣的，點(diǎn)擊到最后一張后再點(diǎn)擊肯定是接著滑動(dòng)的。下面我們接著看，如何實(shí)現(xiàn)一個(gè)無(wú)縫輪播圖

示例代碼：無(wú)縫輪播(可以一直點(diǎn)擊) [10-左右焦點(diǎn)輪播圖-無(wú)縫滾動(dòng).html]

何謂無(wú)縫滾動(dòng)？

無(wú)縫滾動(dòng)就是圖片能夠循環(huán)切換，就算是最后一張，點(diǎn)擊之后也會(huì)跳到第一張

原理：

效果就像上面所說(shuō)的一樣，主要實(shí)現(xiàn)原理就是，在最后面一張圖片，再加上一張圖片，這張圖片就是第一張圖片
當(dāng)滑動(dòng)到最后一張圖片的時(shí)候(看下圖)，此時(shí)的視覺(jué)效果就是停在第一張圖片上
這時(shí)只需要在程序上判斷，當(dāng)在最后一張的時(shí)候，直接跳到第一張圖片即可

示例代碼：無(wú)縫滾動(dòng)的簡(jiǎn)單原理 [10-無(wú)縫滾動(dòng)原理.html]

<style>* {margin: 0;padding: 0;list-style: none;}#slide {position: relative;width: 560px;height: 315px;border: 6px dashed #CBF078;margin: 100px auto;overflow: hidden;}#slide ul {width: 3360px;position: absolute;left: 0;top: 0;}#slide ul li {float: left;}#slide ul li img {display: block;vertical-align: top;} </style> <div id="slide"><ul><li><img src="../image/1.jpg" alt=""></li><li><img src="../image/2.jpg" alt=""></li><li><img src="../image/3.jpg" alt=""></li><li><img src="../image/4.jpg" alt=""></li><li><img src="../image/5.jpg" alt=""></li><li><img src="../image/1.jpg" alt=""></li></ul> </div> <script>var slide = document.getElementById('slide');var ul = slide.children[0];setInterval(function() {// 每次向左移動(dòng)的距離var step = -3;// 獲取 ul的left的值是個(gè)負(fù)值var leader = ul.offsetLeft;// 定義一個(gè)目標(biāo)距離，這里的目標(biāo)距離指的是最后一張圖片距離左邊的left值// 圖片寬度560 在最后一張距離左邊left的位置：-560*5 = -2800// 就是說(shuō)當(dāng)?shù)竭_(dá)這張圖片的時(shí)候就應(yīng)該讓 ul.style.left = "0px";var target = -2800;// 為什么不直接判斷 leader = -2800的時(shí)候讓ul.style.left = "0px";？// 因?yàn)槊看巫?步 3不能被2800整除，所以leader永遠(yuǎn)不會(huì)等于-2800的// 這里直接判斷l(xiāng)eader此時(shí)距左邊的距離減去目標(biāo)距離當(dāng)這個(gè)絕對(duì)值大于等于一步距離的絕對(duì)值3的時(shí)候讓它執(zhí)行往左運(yùn)動(dòng)if (Math.abs(leader - target) >= Math.abs(step)) {leader = leader + step;ul.style.left = leader + "px";// 當(dāng)不足一步距離的時(shí)候說(shuō)明就是最后一張了，就應(yīng)該跳到第一張圖片了} else {ul.style.left = "0px";}}, 15); </script>

效果圖：

左右焦點(diǎn)無(wú)縫輪播圖： [11-左右焦點(diǎn)無(wú)縫輪播圖.html]

效果圖：

3.4 完整版輪播圖

前面我們已經(jīng)可以通過(guò)點(diǎn)擊對(duì)應(yīng)的小點(diǎn)、左右焦點(diǎn)和無(wú)縫滾動(dòng)來(lái)實(shí)現(xiàn)輪播圖了，不過(guò)都是單獨(dú)分開(kāi)來(lái)的，現(xiàn)在我們做個(gè)整合，實(shí)現(xiàn)一個(gè)完整的輪播圖。

功能概述：

簡(jiǎn)單輪播功能
- 給circle下的所有的li注冊(cè)點(diǎn)擊事件
- 排他
- 移動(dòng)Ul
左右焦點(diǎn)功能
- 需要定義一個(gè)變量count來(lái)記錄移動(dòng)的圖片的張數(shù)。
點(diǎn)擊右箭頭功能
- 如果當(dāng)前圖片是最后一張（假圖片），需要瞬間變成真圖片
- 點(diǎn)擊一次，需要讓圖片往右移動(dòng)一張
- 同步小圓點(diǎn)，干掉所有小圓點(diǎn)，復(fù)活對(duì)應(yīng)count的小圓點(diǎn)。
- 最后一張假圖片對(duì)應(yīng)的小圓點(diǎn)是第一個(gè)，需要做特殊處理

點(diǎn)擊左箭頭的功能和右箭頭基本一致。

自動(dòng)輪播的功能
- 開(kāi)啟定時(shí)器，每隔兩秒點(diǎn)擊一次右箭頭
- 鼠標(biāo)經(jīng)過(guò)盒子，停止定時(shí)器(箭頭亂閃的問(wèn)題解釋)觸發(fā)事件的一定要是外面的大盒子，不能是ul，如果給ul注冊(cè)事件，就會(huì)出現(xiàn)亂閃的問(wèn)題
- 鼠標(biāo)離開(kāi)盒子，開(kāi)啟定時(shí)器
同步功能
- 點(diǎn)擊小圓點(diǎn)時(shí)需要同步
- 淘寶bug解決方法(當(dāng)一圈過(guò)后回到第一個(gè)小圓點(diǎn)的時(shí)候，再點(diǎn)擊它會(huì)發(fā)現(xiàn)他會(huì)再跑一圈)
淘寶bug圖：

完整代碼： [12-完整版輪播圖.html]

<style>* {margin: 0;padding: 0;list-style: none;}#slide {width: 560px;height: 315px;margin: 100px auto;position: relative;overflow: hidden;}#slide ul {width: 600%;position: absolute;}#slide ul li {float: left;}#slide ul img {display: block;}#slide #arrow {display: none;}#slide #arrow #leftArr,#slide #arrow #rightArr {width: 30px;height: 60px;background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 50%;margin-top: -30px;text-decoration: none;color: #fff;text-align: center;font: 700 24px/60px "宋體";}#slide #arrow #leftArr {left: 0;}#slide #arrow #rightArr {right: 0;}#slide ol {width: 100px;height: 14px;background-color: rgba(255, 255, 255, .6);/* background-color: pink; */position: absolute;bottom: 14px;left: 50%;margin-left: -50px;border-radius: 7px;}#slide ol li {width: 10px;height: 10px;float: left;background-color: #fff;border-radius: 50%;margin-top: 2px;margin-left: 8.5px;cursor: pointer;}#slide ol li.current {background-color: #DF654A;} </style> <div id="slide"><ul><li><a href="#"><img src="../image/1.jpg" alt=""></a></li><li><a href="#"><img src="../image/2.jpg" alt=""></a></li><li><a href="#"><img src="../image/3.jpg" alt=""></a></li><li><a href="#"><img src="../image/4.jpg" alt=""></a></li><li><a href="#"><img src="../image/5.jpg" alt=""></a></li><li><a href="#"><img src="../image/1.jpg" alt=""></a></li></ul><div id="arrow"><a href="javascript:void(0);" id="leftArr"><</a><a href="javascript:void(0);" id="rightArr">></a></div><ol id="circleOl"><li class="current"></li><li></li><li></li><li></li><li></li></ol> </div><script src="../js/animate.js"></script> <script>// 自執(zhí)行函數(shù)，防止頁(yè)面其他定時(shí)器會(huì)受影響(function() {var slide = document.getElementById('slide');var imgUl = slide.children[0];var imgLis = imgUl.children;var arrow = document.getElementById('arrow');var leftArr = document.getElementById("leftArr");var rightArr = document.getElementById("rightArr");var circleOl = document.getElementById('circleOl');var circleLis = circleOl.children;// 獲取圖片的寬度var imgWidth = slide.offsetWidth;var timer = null;// 點(diǎn)擊小圓點(diǎn)改變對(duì)應(yīng)圖片for (var i = 0; i < circleLis.length; i++) {circleLis[i].index = i;circleLis[i].onclick = function() {// 小圓點(diǎn)點(diǎn)擊的時(shí)候高亮排他for (var i = 0; i < circleLis.length; i++) {circleLis[i].className = "";}this.className = "current";// 淘寶bug：這時(shí)還需要判斷一下就是當(dāng)圖片在最后一張假圖片的時(shí)候，// 再去點(diǎn)擊第一個(gè)小圓點(diǎn)的時(shí)候，會(huì)出現(xiàn)一個(gè)bug，就是圖片會(huì)輪播一圈再回到這張圖片上if (count == imgLis.length - 1) {count = 0;imgUl.style.left = 0;}// 點(diǎn)擊小圓點(diǎn)圖片要移動(dòng)var target = -this.index * imgWidth;// 如果這里不記錄一下，當(dāng)點(diǎn)擊小圓點(diǎn)跳到某張圖片的時(shí)候，再自動(dòng)播放的時(shí)候，// 不會(huì)接著當(dāng)前小圓點(diǎn)的位置往后播放，而是接著之前count不變的情況下繼續(xù)播放的count = this.index;animate(imgUl, target, 40);}}// 左右焦點(diǎn)輪播圖var count = 0; // 跑出去的張數(shù)rightArr.onclick = function() {// 當(dāng)這個(gè)張數(shù)等于最后一張（假圖片）的時(shí)候,偷偷摸摸的把最后一張圖片換成第一張if (count == imgLis.length - 1) {count = 0;imgUl.style.left = 0;}// 點(diǎn)擊一次圖片向右劃動(dòng)一次count++;var target = -count * imgWidth;animate(imgUl, target, 40);//讓小圓點(diǎn)跟著動(dòng) 只要將 count 與小圓點(diǎn)綁定即可for (var i = 0; i < circleLis.length; i++) {circleLis[i].className = "";}// 這里需要判斷一下因?yàn)榇藭r(shí)最后一張是假圖片小圓點(diǎn)是不能正常跳轉(zhuǎn)到第一個(gè)的// 當(dāng)count == 最后一張圖片的下標(biāo)的時(shí)候，直接讓第一個(gè)小圓點(diǎn)亮if (count == imgLis.length - 1) {circleLis[0].className = "current";} else {// 否則其他的下標(biāo)對(duì)應(yīng)的小圓點(diǎn)高亮circleLis[count].className = "current";}}leftArr.onclick = function() {// 判斷是第一張的時(shí)候，偷偷摸摸的把第一張換成最后一張if (count == 0) {count = imgLis.length - 1;imgUl.style.left = -count * imgWidth + "px";}count--;var target = -count * imgWidth;animate(imgUl, target, 40);// 小圓點(diǎn)同步往左的時(shí)候不會(huì)出現(xiàn)小圓點(diǎn)不同步的問(wèn)題for (var i = 0; i < circleLis.length; i++) {circleLis[i].className = "";}circleLis[count].className = "current";}timer = setInterval(function() {rightArr.onclick();}, 2000);// 給slide注冊(cè)鼠標(biāo)經(jīng)過(guò)事件，鼠標(biāo)經(jīng)過(guò)時(shí) 顯示arrowslide.onmouseover = function() {arrow.style.display = "block";// 鼠標(biāo)經(jīng)過(guò)圖片的時(shí)候清除定時(shí)器，停止輪播clearInterval(timer);};// 給slide注冊(cè)鼠標(biāo)離開(kāi)事件，鼠標(biāo)離開(kāi)時(shí) 隱藏arrowslide.onmouseout = function() {arrow.style.display = "none";// 鼠標(biāo)離開(kāi)圖片的時(shí)候開(kāi)啟定時(shí)器，自動(dòng)輪播timer = setInterval(function() {rightArr.onclick();}, 2000);};})()

輪播圖的一些功能可能有點(diǎn)繞，寫的有可能不太看得懂，有疑惑的小伙伴直接私信我，我會(huì)一步步解釋給你聽(tīng)的，有什么bug也可以將代碼發(fā)給我。

想為后面打下扎實(shí)的基礎(chǔ)的話，這里一定要多敲幾遍，主要要搞明白的是實(shí)現(xiàn)的思路，以及一些小bug的解決。這對(duì)后面的學(xué)習(xí)是非常重要的。代碼備注可能讀起來(lái)有些拗口，不懂得小伙伴直接私信給我。

4. 緩動(dòng)動(dòng)畫框架

4.1 緩動(dòng)動(dòng)畫初體驗(yàn)

緩動(dòng)動(dòng)畫，顧名思義，就是越來(lái)越慢的運(yùn)動(dòng)。

我們先來(lái)回顧一下上面勻速動(dòng)畫運(yùn)動(dòng)的原理：

/**step : 一步的距離leader ：當(dāng)前的距離我們可以看到 step在這里一直等于5 不曾改變所以就是勻速運(yùn)動(dòng) */ var step = 5; leader = leader + step;

現(xiàn)在我們?cè)賮?lái)看下緩動(dòng)動(dòng)畫的原理：

/** target：目標(biāo)距離，盒子運(yùn)動(dòng)到什么地方step ：同樣的，還是指每次運(yùn)動(dòng)的距離，但是這里的步數(shù)是一個(gè)變化的量了，我們可以看到它會(huì)隨著leader的增加變得越來(lái)越小，這就是緩動(dòng)動(dòng)畫的原理leader：當(dāng)前的距離 */ var step = (target - leader)/10; leader = leader + step;

示例代碼： [13-緩動(dòng)動(dòng)畫初體驗(yàn)(一).html]

<style>* {margin: 0;padding: 0;}#box {width: 100px;height: 100px;position: absolute;background: orange;} </style> <input type="button" value="奔跑吧" id="btn"> <div id="box"></div> <script>var box = document.getElementById('box');var btn = document.getElementById('btn');var timer = null;btn.onclick = function() {clearInterval(timer);timer = setInterval(function() {// 定義一個(gè)目標(biāo)距離var target = 600;// 獲得當(dāng)前盒子的位置var leader = box.offsetLeft;// 每次運(yùn)動(dòng)的距離var step = (target - leader) / 10;// leader = leader + step 動(dòng)起來(lái)leader += step;// 將距離給盒子box.style.left = leader + "px";// 當(dāng)當(dāng)前距離等于目標(biāo)距離的時(shí)候清除定時(shí)器if (leader == target) {clearInterval(timer);}}, 15);} </script>

效果圖：

完美了嗎？并沒(méi)有，這里有個(gè)小bug：

可能會(huì)有小伙伴不理解，有問(wèn)題你上面直接講一下不就得了，還特地賣關(guān)子在下面重新寫一遍。我想跟大家說(shuō)的一點(diǎn)就是，如果在上面我直接告訴你這里有個(gè)問(wèn)題有個(gè)bug的話，你一眼看過(guò)，可能都不當(dāng)回事，我在這里拿出來(lái)講一下，相信這個(gè)知識(shí)點(diǎn)你會(huì)記得更深。

小bug：明明設(shè)置的是600，怎么會(huì)是596.4px呢？

原因：

offsetLeft獲取值的時(shí)候，只會(huì)獲取整數(shù)，會(huì)對(duì)小數(shù)部分會(huì)四舍五入處理，比如step = (target - leader)/10當(dāng)step的值出現(xiàn)小數(shù)的時(shí)候，leader+= step之后，offsetLeft在獲取leader位置的時(shí)候就會(huì)把小數(shù)部分四舍五入，這樣就會(huì)造成最后距離的誤差。

解決方法：

對(duì)step向上取整處理(Math.ceil())，保證每一次都至少跑1px的距離,只要不出現(xiàn)小數(shù)offsetLeft就不會(huì)出現(xiàn)四舍五入。

完整代碼： [14-緩動(dòng)動(dòng)畫初體驗(yàn)(二).html]

4.2 緩動(dòng)動(dòng)畫函數(shù)封裝

前面勻速動(dòng)畫那里已經(jīng)講過(guò)封裝一個(gè)函數(shù)的好處與重要性，現(xiàn)在我們將緩動(dòng)動(dòng)畫也封裝成一個(gè)函數(shù)。

示例代碼： [15-緩動(dòng)動(dòng)畫函數(shù)封裝.html]

<style>* {margin: 0;padding: 0;}#box {width: 100px;height: 100px;background: orange;position: absolute;} </style> <input type="button" value="奔跑吧500" id="btn1"> <input type="button" value="奔跑吧1000" id="btn2"> <div id="box"></div> <script>var btn1 = document.getElementById('btn1');var btn2 = document.getElementById('btn2');var box = document.getElementById('box');// 緩動(dòng)動(dòng)畫函數(shù)/**element ：執(zhí)行動(dòng)畫元素target ：目標(biāo)距離num ：用來(lái)控制動(dòng)畫執(zhí)行的速度越大動(dòng)畫執(zhí)行越慢*/function slowAnimate(element, target, num) {// 一進(jìn)來(lái)就要清除定時(shí)器，防止越點(diǎn)越快clearInterval(element.timer);element.timer = setInterval(function() {// 獲得元素當(dāng)前位置var leader = element.offsetLeft;// 定義每次運(yùn)動(dòng)的距離var step = (target - leader) / num;// step可能是小數(shù) 所以要取整step = Math.ceil(step);leader += step;// 設(shè)置元素的位置element.style.left = leader + 'px';// 當(dāng)元素的位置等于目標(biāo)位置的時(shí)候清除定時(shí)器if (leader == target) {clearInterval(element.timer);}}, 15);}// 調(diào)用緩動(dòng)動(dòng)畫函數(shù)btn1.onclick = function() {slowAnimate(box, 500, 10);}// 同樣是運(yùn)動(dòng)500的距離，我們可以發(fā)現(xiàn)從500到1000，明顯執(zhí)行的比從0-500執(zhí)行的慢btn2.onclick = function() {slowAnimate(box, 1000, 30);} </script>

效果圖：

又到了找bug的時(shí)候了：

上面的代碼從0-500，從500-1000都沒(méi)有問(wèn)題，經(jīng)過(guò)向上取整后都能到達(dá)目標(biāo)距離：500和1000。但是小伙伴可以看下，當(dāng)從1000回到500的時(shí)候，是正好回到500的嗎？答案肯定不是的，為什么呢？

step為正數(shù)的時(shí)候，向上取整是完全沒(méi)有問(wèn)題的，但是當(dāng)從1000到500的時(shí)候，step就是負(fù)數(shù)了，負(fù)數(shù)向上取整后就會(huì)變得更大，比如原本是-33.3，向上取整后就是-33了，-0.3就會(huì)舍去，所有就不會(huì)到500的位置。

解決方法： 判斷step的正負(fù)，為正的時(shí)候，向上取整。為負(fù)的時(shí)候，向下取整。

緩動(dòng)函數(shù)封裝完整版： [16-緩動(dòng)動(dòng)畫函數(shù)封裝完整版.html]

4.3 獲取元素計(jì)算后的樣式

獲取元素計(jì)算后的樣式指的是元素經(jīng)過(guò)層疊后真正生效的樣式，不管樣式寫在哪，計(jì)算后的樣式指的就是最終的樣式。

通過(guò)style只能獲取到寫在行內(nèi)的樣式，那么想要獲取其他的樣式怎么辦呢？

js提供了一個(gè)方法：window.getComputedStyle(element, null)[attr];，它返回的是一個(gè)對(duì)象CSSStyleDeclaration，[attr]就是這個(gè)對(duì)象里面就是計(jì)算后的所有的樣式的屬性名(關(guān)聯(lián)數(shù)組取對(duì)象的值)。element指的是當(dāng)前參數(shù)，null

這里可以不用深究-官方解釋。這個(gè)方法需要window調(diào)用。

/**element ：獲取樣式的當(dāng)前元素null ：這里可以傳一個(gè)偽元素，如果不是偽元素的話必須是nullattr ：后面可以寫具體的屬性，比如boderRadius 就會(huì)獲取這個(gè)元素的border-radius樣式信息 */ window.getComputedStyle(element,null)[attr];

示例代碼： [17-獲取元素計(jì)算后的樣式.html]

<style>div {width: 100px;height: 100px;background: pink;}#box {width: 200px;} </style> <div id="box" style="width:300px;"></div> <script>var box = document.getElementById('box');console.log(window.getComputedStyle(box, null)); // 打印獲得box的各種屬性的樣式// 其中行內(nèi)樣式權(quán)重最高，所以最后獲得的寬應(yīng)該是300pxconsole.log(window.getComputedStyle(box, null).width); // 300pxconsole.log(window.getComputedStyle(box, null).background);</script>

效果圖：

兼容性處理：

window.getComputedStyle(element, null)[attr];只適用于現(xiàn)代瀏覽器中
IE678有自己的方法：element.currentStyle[attr];

// 獲取元素計(jì)算后的樣式 function getStyle(element,attr){if(window.getComputedStyle){return window.getComputedStyle(element, null)[attr];}else{return element.currentStyle[attr];} }// 注意：調(diào)用函數(shù)的時(shí)候獲取的屬性名是一個(gè)字符串 alert(getStyle(box, "width"));

[18-獲取元素計(jì)算后的樣式兼容性處理.html]

注意： 上面的封裝函數(shù)中，調(diào)用的時(shí)候，屬性名是一個(gè)字符串類型。

4.4 緩動(dòng)動(dòng)畫修改多個(gè)樣式

不管是上面的勻速動(dòng)畫函數(shù)，還是這里的緩動(dòng)動(dòng)畫函數(shù)，都只能左右運(yùn)動(dòng)，但是一個(gè)真正完整的動(dòng)畫函數(shù)，只改變左右位置肯定是不夠的，我們可能需要改變它的寬高等。在上面一節(jié)中，我們知道了如何獲取到元素計(jì)算后的樣式，而且只要是元素有的樣式都能獲取到，有了這個(gè)方法我們就可以讓動(dòng)畫去執(zhí)行更多的事情了。

1、對(duì)獲取到的樣式返回值進(jìn)行處理：

在上面的一節(jié)中，我們可以看到，獲取的返回值都是字符串格式，比如獲取寬度的時(shí)候，返回的是一個(gè)"300px"的字符串，因?yàn)榫弰?dòng)動(dòng)畫函數(shù)里面是需要計(jì)算的，這里是個(gè)字符串肯定不行，所以我們需要對(duì)其進(jìn)行parseInt取整處理。

[19-緩動(dòng)動(dòng)畫修改多個(gè)樣式-處理返回值.html]：

上面的代碼我們對(duì)它的返回值進(jìn)行了處理，而且還可以對(duì)它設(shè)置其他的樣式，只要單位是px的屬性都可以設(shè)置。但是這里每次還是只能設(shè)置一個(gè)樣式，下面我們來(lái)實(shí)現(xiàn)修改多個(gè)樣式。

注意： leader = parseInt(leader) || 0; "或"上0的目的就是：當(dāng)有些屬性設(shè)置的值不是數(shù)字的時(shí)候，比如：auto，這時(shí)候parseInt轉(zhuǎn)換的結(jié)果是NaN。當(dāng)"或"上0之后，轉(zhuǎn)換失敗后，leader，就會(huì)默認(rèn)是0。

2、遍歷一個(gè)對(duì)象：

讓我們來(lái)復(fù)習(xí)一下，js基礎(chǔ)的時(shí)候，我們接觸到了對(duì)象，并且知道了可以用for..in的方法來(lái)遍歷對(duì)象。我們知道getComputedStyle方法，獲取計(jì)算后樣式的時(shí)候，返回的是一個(gè)名叫CSSStyleDeclaration的對(duì)象，這個(gè)對(duì)象里面是所有的樣式屬性，我們想要對(duì)這些屬性進(jìn)行多個(gè)操作的時(shí)候，就可以通過(guò)遍歷的方法。 for(k in obj){// k ：就是相當(dāng)于對(duì)象的鍵// obj ：就是需要遍歷的對(duì)象 }

3、同時(shí)修改多個(gè)樣式：

同時(shí)修改多個(gè)樣式，就是將要修改的多個(gè)屬性以對(duì)象的形式作為參數(shù)傳進(jìn)函數(shù)中。

[20-緩動(dòng)動(dòng)畫修改多個(gè)樣式.html]

效果圖：

通過(guò)上面封裝的函數(shù)我們可以改變多個(gè)樣式，但是效果圖中我們可以看到一個(gè)問(wèn)題，就是當(dāng)?shù)竭_(dá)設(shè)定值后，點(diǎn)擊按鈕還會(huì)慢慢的抖動(dòng)。原因是修改多個(gè)樣式的時(shí)候，所有的樣式并不能都到同時(shí)達(dá)終點(diǎn)。

4.5 緩動(dòng)動(dòng)畫修復(fù)定時(shí)器bug

出現(xiàn)這個(gè)bug的原因：在for循環(huán)中判斷是否到達(dá)目標(biāo)值，到達(dá)后就清除定時(shí)器，但是我們同時(shí)修改了5個(gè)樣式，可能有的樣式到達(dá)目標(biāo)值后就清楚定時(shí)器了，但是有的樣式還沒(méi)到達(dá)目標(biāo)值，所以就出現(xiàn)了上面的bug。

解決方法：假設(shè)成立法

假設(shè)成立
想辦法推翻假設(shè)
如果推翻不了，說(shuō)明假設(shè)成立

示例代碼： [21-緩動(dòng)動(dòng)畫修改多個(gè)樣式-修復(fù)定時(shí)器bug.html]

4.6 緩動(dòng)動(dòng)畫兼容其它樣式屬性

經(jīng)過(guò)前面幾小節(jié)的學(xué)習(xí)，我們已經(jīng)可以實(shí)現(xiàn)同時(shí)修改多個(gè)樣式的緩動(dòng)動(dòng)畫了。但是細(xì)心的小伙伴不知道有沒(méi)有發(fā)現(xiàn)，目前只能設(shè)置跟px有關(guān)系的樣式，包括設(shè)置border-radiu也不算完善。這是因?yàn)槲覀兙弰?dòng)動(dòng)畫封裝的時(shí)后，設(shè)置的element.style[attr] = leader + "px";，所以只能實(shí)現(xiàn)跟px有關(guān)的樣式。

設(shè)置兼容其他屬性的時(shí)候，要注意兩點(diǎn)，第一獲取的時(shí)候要進(jìn)行判斷，設(shè)置的時(shí)候也要進(jìn)行判斷

1、兼容opacity屬性： [22-緩動(dòng)動(dòng)畫修改多個(gè)樣式-兼容opacity.html]

2、兼容zIndex屬性： [23-緩動(dòng)動(dòng)畫修改多個(gè)樣式-兼容zIndex.html]

zIndex這個(gè)屬性不需要緩動(dòng)的執(zhí)行改變層級(jí)，直接獲得傳進(jìn)來(lái)的值設(shè)置即可 // 賦值 if (attr === "opacity") {element.style[attr] = leader / 100;element.style.filter = "alpha(opacity=" + leader + ")"; // 判斷設(shè)置的時(shí)候是否是zIndex屬性 } else if (attr === "zIndex") {element.style.zIndex= leader; } else {element.style[attr] = leader + "px"; }

示例代碼： [24-緩動(dòng)動(dòng)畫淡入淡出效果.html]

btn1.onclick = function() {animate(box, {opacity: 100}) } btn2.onclick = function() {animate(box, {opacity: 0}) }

效果圖：

4.7 緩動(dòng)動(dòng)畫添加回調(diào)函數(shù)

程序執(zhí)行完畢，再次執(zhí)行的函數(shù)。

示例代碼： [25-緩動(dòng)動(dòng)畫添加回調(diào)函數(shù).html]

效果圖：

5. 筋斗云案例

直接看效果圖：

效果如上圖，當(dāng)我們鼠標(biāo)經(jīng)過(guò)某一項(xiàng)時(shí)，小方塊會(huì)緩動(dòng)移過(guò)去，當(dāng)離開(kāi)列表欄時(shí)，小方塊會(huì)回到最初的位置。當(dāng)點(diǎn)擊某一項(xiàng)時(shí)小方塊的初始位置就會(huì)停留在該項(xiàng)上。

示例代碼： [26-筋斗云案例.html]

<style>body {padding: 0;margin: 0;background: #333;}#box {width: 800px;height: 34px;margin: 100px auto;background: orange;position: relative;}ul {padding: 0 50px;height: 34px;position: relative;}#box ul li {float: left;width: 100px;height: 34px;line-height: 34px;text-align: center;list-style: none;font-size: 18px;font-family: '方正';color: #fff;cursor: pointer;}#over {position: absolute;top: -3px;left: 51px;width: 100px;height: 38px;background: orangered;} </style> <div id='box'><span id='over'></span><ul id='nav'><li>首頁(yè)</li><li>社區(qū)服務(wù)</li><li>智慧超市</li><li>便民</li><li>圈子</li><li>活動(dòng)</li><li>聚優(yōu)惠</li></ul> </div> <script>var over = document.getElementById('over');var nav = document.getElementById('nav');var lis = nav.children;for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {// 鼠標(biāo)經(jīng)過(guò)時(shí)移動(dòng)的距離就是它距離左邊的距離slowAnimate(over, this.offsetLeft);}// 設(shè)定默認(rèn)位置，因?yàn)榈谝粋€(gè)選項(xiàng)距離左邊為51px距離所以，默認(rèn)值設(shè)置為51var staticLeft = 51;lis[i].onmouseout = function() {// 鼠標(biāo)離開(kāi)的時(shí)候，要讓它回到默認(rèn)位置slowAnimate(over, staticLeft);}lis[i].onclick = function() {// 當(dāng)點(diǎn)擊某一選項(xiàng)的時(shí)候，將默認(rèn)位置設(shè)置為此時(shí)的位置staticLeft = this.offsetLeft;}}// 緩動(dòng)動(dòng)畫function slowAnimate(element, target, num) {clearInterval(element.timer);element.timer = setInterval(function() {var leader = element.offsetLeft;// num 不傳的話，默認(rèn)是10var step = (target - leader) / (num || 10);step = step > 0 ? Math.ceil(step) : Math.floor(step);leader += step;element.style.left = leader + 'px';if (leader == target) {clearInterval(element.timer);}}, 15);} </script>

6. 右下角關(guān)閉廣告案例

在網(wǎng)頁(yè)中經(jīng)常會(huì)出現(xiàn)廣告，我們舉個(gè)例子讓關(guān)閉廣告的時(shí)候有一個(gè)動(dòng)畫效果。

實(shí)現(xiàn)原理：

圖片其實(shí)被切成了兩個(gè)部分，看到的效果是一張圖片，其實(shí)是兩張。
點(diǎn)擊關(guān)閉按鈕的時(shí)候，調(diào)用緩動(dòng)動(dòng)畫函數(shù)，將下半部分的盒子高度等于0，所以會(huì)出現(xiàn)一個(gè)向下的效果
在剛剛的動(dòng)畫函數(shù)的回調(diào)函數(shù)里面繼續(xù)調(diào)用緩動(dòng)動(dòng)畫，將整個(gè)大盒子的寬度等于0，所以出現(xiàn)一個(gè)向右的效果

示例代碼： [27-右下角關(guān)閉廣告案例.html]

<style>#box {width: 213px;position: fixed;bottom: 0;right: 0;overflow: hidden;}#close {position: absolute;top: 0;right: 0;width: 30px;height: 30px;cursor: pointer;color: #FFFFFF;text-align: center;}.img {display: block;width: 212px;z-index: 99;} </style> <div id="box"><div id="hd"><span id="close"> x </span><img src="../image/關(guān)閉廣告/banna_up.png" class="img" alt="" /></div><div id="bt"><img src="../image/關(guān)閉廣告/banner_down.png" class="img" alt="" /></div> </div> <script src="../js/slow-animate-styles.js"></script> <script>var close = document.getElementById('close');var box = document.getElementById('box');var bt = document.getElementById('bt');close.onclick = function() {slowAnimateStyles(bt, {height: 0}, function() {slowAnimateStyles(box, {width: 0});});} </script>

效果圖：

7. 手風(fēng)琴案例

手風(fēng)琴效果在網(wǎng)頁(yè)中用的也特別的多，下面我們會(huì)介紹兩種實(shí)現(xiàn)的方法，當(dāng)然個(gè)人比較偏好第二種。

1、浮動(dòng)版手風(fēng)琴

實(shí)現(xiàn)原理：

用ul，li進(jìn)行布局，li左浮動(dòng)，并且設(shè)置等分的寬度；
給每個(gè)li注冊(cè)鼠標(biāo)經(jīng)過(guò)事件，當(dāng)鼠標(biāo)經(jīng)過(guò)的時(shí)候利用排他原理，將所有的li寬度設(shè)置成最小寬度，將當(dāng)前經(jīng)過(guò)的li寬度設(shè)置一個(gè)最大寬度；
然后再去設(shè)置鼠標(biāo)離開(kāi)事件，當(dāng)鼠標(biāo)離開(kāi)時(shí)讓所有的li再恢復(fù)到等分的寬度。

示例代碼： [28-手風(fēng)琴-浮動(dòng)版.html]

<style>* {margin: 0;padding: 0;list-style: none;}#box {width: 900px;height: 441px;margin: 100px auto;overflow: hidden;border-radius: 30px;}ul {/* ul的寬要比外面的盒子大一點(diǎn)，否則在添加動(dòng)畫效果的時(shí)候，最后一個(gè)li會(huì)出現(xiàn)閃動(dòng) */width: 120%;height: 100%;overflow: hidden;}li {width: 180px;height: 100%;float: left;} </style> <div id="box"><ul><li></li><li></li><li></li><li></li><li></li></ul> </div> <script src="../js/slow-animate-styles.js"></script> <script>var box = document.getElementById('box');var lis = box.getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {// 動(dòng)態(tài)創(chuàng)建img標(biāo)簽var img = document.createElement("img");img.src = "../image/手風(fēng)琴/" + (i + 1) + ".png";lis[i].appendChild(img);// 給所有l(wèi)i注冊(cè)鼠標(biāo)經(jīng)過(guò)事件，讓當(dāng)前的li寬度變成 500，其余的li寬度變成100lis[i].onmouseover = function() {for (var i = 0; i < lis.length; i++) {// 先讓所有的li寬度變成100slowAnimateStyles(lis[i], {width: 100});// 鼠標(biāo)當(dāng)前經(jīng)過(guò)的寬度為500slowAnimateStyles(this, {width: 500})}};// 當(dāng)鼠標(biāo)離開(kāi)的時(shí)候，所以的li 寬度恢復(fù)到180pxlis[i].onmouseout = function() {for (var i = 0; i < lis.length; i++) {slowAnimateStyles(lis[i], {width: 180})}}} </script>

效果圖：

2、定位版手風(fēng)琴

實(shí)現(xiàn)原理：

給外部大盒子設(shè)置一個(gè)與圖片大小一致的寬高，并且設(shè)置相對(duì)定位
還是采用ul，li結(jié)構(gòu)，li設(shè)置寬高，與圖片大小一致，設(shè)置絕對(duì)定
動(dòng)態(tài)的給li添加背景圖片，因?yàn)閘i絕對(duì)定位的原因，此時(shí)所有的li都疊在一起
動(dòng)態(tài)的給每個(gè)li設(shè)置left值(left*i)，這時(shí)候li就會(huì)依次排開(kāi)
大盒子還要設(shè)置一個(gè)overflow-hidden屬性，將多余的隱藏掉
給每個(gè)li注冊(cè)鼠標(biāo)鼠標(biāo)經(jīng)過(guò)事件，然后根據(jù)下面推算出的規(guī)律(當(dāng)前鼠標(biāo)經(jīng)過(guò)的索引index，他之前包括他自己的left值都是，設(shè)定的最小值乘以對(duì)應(yīng)的索引。而他后面的會(huì)將設(shè)定的最小值乘以對(duì)應(yīng)的索引后再加上450，這里的450不是一個(gè)固定值，根據(jù)規(guī)律找出來(lái)的)進(jìn)行判斷，設(shè)置各自的left值；
鼠標(biāo)離開(kāi)的時(shí)候再讓所有的盒子恢復(fù)到一開(kāi)始的位置，每個(gè)li顯示等分的寬度

大盒子沒(méi)有overflow-hidden的時(shí)候：

畫個(gè)圖，理解一下：

找規(guī)律：

結(jié)合上面的圖片，我們可以找到一個(gè)規(guī)律

當(dāng)鼠標(biāo)在第1個(gè)li上的時(shí)候，li下標(biāo)index為0：
- index：0 left：0
- index：1 left：500px
- index：2 left：550px
- index：3 left：600px
- index：4 left：650px
當(dāng)鼠標(biāo)在第2個(gè)li上的時(shí)候，li下標(biāo)index為1：
- index：0 left：0
- index：1 left：50px
- index：2 left：550px
- index：3 left：600px
- index：4 left：650px
當(dāng)鼠標(biāo)在第3個(gè)li上的時(shí)候，li下標(biāo)index為2：
- index：0 left：0
- index：1 left：50px
- index：2 left：100px
- index：3 left：600px
- index：4 left：650px

看出規(guī)律了嗎？

當(dāng)對(duì)應(yīng)li的下標(biāo)<=鼠標(biāo)懸停的的下標(biāo)上的時(shí)候left值是50*i
當(dāng)對(duì)應(yīng)li的下標(biāo)>鼠標(biāo)懸停的的下標(biāo)上的時(shí)候left值是50*i + ,450(450不是固定的值，是經(jīng)過(guò)計(jì)算出來(lái)的)

示例代碼： 29-手風(fēng)琴-定位版.html]

<style>* {margin: 0;padding: 0;list-style: none;}#box {width: 700px;height: 440px;margin: 100px auto;position: relative;overflow: hidden;box-sizing: border-box;border-radius: 30px;}li {width: 700px;height: 440px;position: absolute;/* background: yellow; */} </style> <div id="box"><ul><li></li><li></li><li></li><li></li><li></li></ul> </div> <script src="../js/slow-animate-styles.js"></script> <script>var box = document.getElementById('box');var lis = box.getElementsByTagName('li');for (var i = 0; i < lis.length; i++) {lis[i].index = i;// 動(dòng)態(tài)添加li的背景圖片因?yàn)閕下標(biāo)從0開(kāi)始，但是圖片序號(hào)是從1開(kāi)始所以jia1lis[i].style.backgroundImage = "url(../image/手風(fēng)琴/" + (i + 1) + ".png)";// 現(xiàn)在都疊在一起，設(shè)置left 讓他們分開(kāi)來(lái) 700/5 ==> 140pxlis[i].style.left = 140 * i + "px";// 注冊(cè)鼠標(biāo)經(jīng)過(guò)事件，讓當(dāng)前的顯示寬度為500，其余的為50lis[i].onmouseover = function() {for (var i = 0; i < lis.length; i++) {// 判斷當(dāng)i小于等于當(dāng)前鼠標(biāo)停留的下標(biāo)的時(shí)候，給li的left設(shè)置 50*iif (i <= this.index) {slowAnimateStyles(lis[i], {left: 50 * i});// 當(dāng)i大于當(dāng)前鼠標(biāo)停留的索引的時(shí)候，給后邊的li的left設(shè)置 50*i + 450 } else {slowAnimateStyles(lis[i], {left: 50 * i + 450});}}}// 注冊(cè)鼠標(biāo)離開(kāi)事件，讓所有的li都恢復(fù)到最初的樣式lis[i].onmouseout = function() {for (var i = 0; i < lis.length; i++) {slowAnimateStyles(lis[i], {left: 140 * i});}}} </script>

效果圖：

8.旋轉(zhuǎn)木馬案例

旋轉(zhuǎn)木馬也叫旋轉(zhuǎn)輪播圖，在效果上它就是旋轉(zhuǎn)版的輪播圖，但是在實(shí)現(xiàn)原理上卻一點(diǎn)一不一樣

旋轉(zhuǎn)木馬原理：

利用ul、li方式將圖片包裹在li里，并且對(duì)每個(gè)li的大小、層級(jí)、不透明度以及定位的位置設(shè)置好
樣式上可能比較繁瑣，我們將上面的每個(gè)參數(shù)再以對(duì)象的方式存到數(shù)組datas中
之前封裝過(guò)一個(gè)緩動(dòng)動(dòng)畫函數(shù)，可以改變層級(jí)和不透明度，這里正好用得到
其實(shí)拋開(kāi)上面樣式上的細(xì)節(jié)，旋轉(zhuǎn)木馬最核心的就是運(yùn)用到幾個(gè)數(shù)組常用的方法 pop、unshift、shift、push
點(diǎn)擊右按鈕的時(shí)候，將datas里的最后一項(xiàng)利用pop刪除掉，并且返回這個(gè)刪除的數(shù)據(jù)，再將這個(gè)數(shù)據(jù)unshift到數(shù)組的最前面。重新遍歷數(shù)組，執(zhí)行一遍動(dòng)畫
點(diǎn)擊左箭頭的時(shí)候，將datas里的最前面一項(xiàng)利用shift刪除掉，并且返回這個(gè)刪除的數(shù)據(jù)，再將這個(gè)數(shù)據(jù)push到數(shù)組的最后面。重新遍歷數(shù)組，執(zhí)行一遍動(dòng)畫
再給按鈕添加一個(gè)節(jié)流閥，沒(méi)加之前不停地點(diǎn)擊按鈕，圖片就會(huì)不停切換，加上之后，點(diǎn)一次執(zhí)行完才可以再次點(diǎn)擊。

示例代碼： [30-旋轉(zhuǎn)木馬輪播圖案例.html]

<style>* {margin: 0;padding: 0;list-style: none;}body {background: #666;}.wrap {width: 1200px;margin: 200px auto;}.slide {height: 340px;position: relative;}.slide li {position: absolute;left: 300px;top: 0;}img {width: 100%;}.arrow {opacity: 0;position: relative;z-index: 99;top: 50%;}.arrow #left,.arrow #right {width: 40px;height: 90px;position: absolute;top: 50%;margin-top: -45px;background: url(../image/旋轉(zhuǎn)木馬/left.png);background-size: cover;z-index: 99;}.arrow #right {right: 0;background: url(../image/旋轉(zhuǎn)木馬/right.png);background-size: cover;} </style> <div class="wrap" id="wrap"><div class="slide" id="slide"><ul><li><img src="../image/1.jpg" alt=""></li><li><img src="../image/2.jpg" alt=""></li><li><img src="../image/3.jpg" alt=""></li><li><img src="../image/4.jpg" alt=""></li><li><img src="../image/5.jpg" alt=""></li></ul><div class="arrow" id="arrow"><a href="javascript:;"><span id="left"></span></a><a href="javascript:;"><span id="right"></span></a></div></div> </div> <script src="../js/slow-animate-styles.js"> </script> <script>// 將其余四張位置與透明度等信息，存放在一個(gè)數(shù)組中var datas = [{"width": 300,"top": -20,"left": 150,"opacity": 20,"zIndex": 2}, //0{"width": 500,"top": 30,"left": 50,"opacity": 80,"zIndex": 3}, //1{"width": 600,"top": 100,"left": 300,"opacity": 100,"zIndex": 4}, //2{"width": 500,"top": 30,"left": 650,"opacity": 80,"zIndex": 3}, //3{"width": 300,"top": -20,"left": 750,"opacity": 20,"zIndex": 2} //4];var slide = document.getElementById('slide');var lis = slide.getElementsByTagName('li');var arrow = document.getElementById('arrow');var left = document.getElementById('left');var right = document.getElementById('right');// 定義一個(gè)節(jié)流閥var flag = true;// 一開(kāi)始頁(yè)面刷新的時(shí)候，將datas里的數(shù)據(jù) 動(dòng)態(tài)添加進(jìn)去for (var i = 0; i < lis.length; i++) {slowAnimateStyles(lis[i], datas[i]);};// 鼠標(biāo)經(jīng)過(guò)的時(shí)候箭頭顯示slide.onmouseover = function() {slowAnimateStyles(arrow, {opacity: 100})};// 鼠標(biāo)離開(kāi)的時(shí)候箭頭隱藏slide.onmouseout = function() {slowAnimateStyles(arrow, {opacity: 0})};// 點(diǎn)擊右箭頭的時(shí)候// 利用數(shù)組的pop 和 unshift方法對(duì)數(shù)組datas進(jìn)行操作// pop 會(huì)刪除數(shù)組的最后一項(xiàng)，并且返回這一項(xiàng)。 unshift 會(huì)在數(shù)組的最前添加right.onclick = function() {// 只有節(jié)流閥為true的時(shí)候點(diǎn)擊才會(huì)執(zhí)行里面的代碼if (flag) {// 電擊后一進(jìn)來(lái)就將節(jié)流閥關(guān)上，再次點(diǎn)擊的時(shí)候就不會(huì)進(jìn)來(lái)flag = false;datas.unshift(datas.pop());for (var i = 0; i < lis.length; i++) {// 點(diǎn)擊一次就要?jiǎng)赢嬩秩疽淮?#xff0c;datas[i] 其實(shí)是一個(gè)對(duì)象/*{"width": 300,"top": -20,"left": 150,"opacity": 20,"zIndex": 2}*/slowAnimateStyles(lis[i], datas[i], function() {// 當(dāng)動(dòng)畫執(zhí)行完，也就是回調(diào)函數(shù)觸發(fā)的時(shí)候，再將節(jié)流閥打開(kāi)，這樣就可以繼續(xù)點(diǎn)擊了flag = true;});}}}// 點(diǎn)擊左箭頭// 利用數(shù)組的 shift 和 push方法對(duì)數(shù)組datas進(jìn)行操作// shift 會(huì)刪除數(shù)組的第一項(xiàng)，并且返回這一項(xiàng)。 push 會(huì)在數(shù)組的最后添加left.onclick = function() {if (flag) {flag = false;datas.push(datas.shift());for (var i = 0; i < lis.length; i++) {slowAnimateStyles(lis[i], datas[i], function() {flag = true;});}}} </script>

效果圖：

上一篇：JavaScript 基礎(chǔ)知識(shí) - BOM篇
下一篇：JavaScript 進(jìn)階知識(shí) - 特效篇(二)

總結(jié)

以上是生活随笔為你收集整理的JavaScript 进阶知识 - 特效篇(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： CSS3-3D转换
下一篇： 22-08-06 西安尚医通（03）E

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

javascript

JavaScript 进阶知识 - 特效篇(一)

JS特效

前言

1. offset 系列

1.1 offsetWidth 和 offsetHeight

1.2 offsetParent

1.3 offsetLeft與offsetTop

2. 勻速動(dòng)畫框架

2.1 勻速動(dòng)畫初體驗(yàn)

2.2 勻速動(dòng)畫函數(shù)封裝

3. 輪播圖

3.1 簡(jiǎn)單輪播圖

3.2 左右焦點(diǎn)輪播圖

3.3 無(wú)縫輪播圖

3.4 完整版輪播圖

4. 緩動(dòng)動(dòng)畫框架

4.1 緩動(dòng)動(dòng)畫初體驗(yàn)

4.2 緩動(dòng)動(dòng)畫函數(shù)封裝

4.3 獲取元素計(jì)算后的樣式

4.4 緩動(dòng)動(dòng)畫修改多個(gè)樣式

4.5 緩動(dòng)動(dòng)畫修復(fù)定時(shí)器bug

4.6 緩動(dòng)動(dòng)畫兼容其它樣式屬性

4.7 緩動(dòng)動(dòng)畫添加回調(diào)函數(shù)

5. 筋斗云案例

6. 右下角關(guān)閉廣告案例

7. 手風(fēng)琴案例

8.旋轉(zhuǎn)木馬案例

總結(jié)