目錄

• 一、常見網頁特效
• 1. 案例：網頁輪播圖
• • 1.1 案例分析
  • • 1.1.1 左右按鈕的顯示與隱藏
    • 1.1.2 動態生成小圓圈
    • 1.1.3 小圓圈的排他思想
    • 1.1.4 點擊小圓圈滾動圖片
    • 1.1.5 點擊右側按鈕一次，就讓圖片滾動一張
    • 1.1.6 克隆第一張圖片
    • 1.1.7 點擊右側按鈕，小圓圈跟隨變化
    • 小bug
    • 1.1.8 左側按鈕功能實現
    • 1.1.9 自動播放功能
  • 1.2 節流閥
  • 1.3 代碼展示
  • • html
    • css
    • js
    • animate.js
• 2. 案例：返回頂部
• • js
• 3. 案例：筋斗云
• • 3.1 案例分析
  • 3.2 代碼實現

---

一、常見網頁特效

1. 案例：網頁輪播圖

輪播圖也稱為焦點圖，是網頁中比較常見的網頁特效。
功能需求：

鼠標經過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕。

點擊右側按鈕一次，圖片往左播放一張，以此類推，左側按鈕同理。

圖片播放的同時，下面小圓圈模塊跟隨一起變化。

點擊小圓圈，可以播放相應圖片。

鼠標不經過輪播圖，輪播圖也會自動播放圖片。

鼠標經過，輪播圖模塊，自動播放停止。

1.1 案例分析

1.1.1 左右按鈕的顯示與隱藏

// 等頁面所有元素加載完后再執行js window.addEventListener('load', function () {//this.alert('1'); // 測試// 1. 獲取元素var arrow_l = this.document.querySelector('.arrow-l');var arrow_r = this.document.querySelector('.arrow-r');var focus = document.querySelector('.focus');// 2. 鼠標經過focus 就顯示隱藏的左右按鈕focus.addEventListener('mouseenter', function () {arrow_l.style.display = 'block';arrow_r.style.display = 'block';})// 鼠標離開focus 就隱藏左右按鈕focus.addEventListener('mouseleave', function () {arrow_l.style.display = 'none';arrow_r.style.display = 'none';})})

1.1.2 動態生成小圓圈

// 3. 動態生成小圓圈，有幾張圖片我們就生成幾個小圓圈var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle');// console.log(ul.children.length); testfor (var i = 0; i < ul.children.length; i++) {// 創建一個小livar li = this.document.createElement('li');// 把小li插入到ol里面ol.appendChild(li);}// 把ol的第一個小li設置類名為 currentol.children[0].className = 'current';

1.1.3 小圓圈的排他思想

排他思想的口訣： 干掉所有人，留下我自己

// 4. 小圓圈的排他思想 我們可以直接生成小圓圈的同時直接綁定點擊事件li.addEventListener('click', function () {// 干掉所有人 把所有的小li 清除 current 類名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ' ';}// 留下我自己 當前的小li 設置current 類名this.className = 'current';})

把這段代碼寫到上一段代碼的for循環里面

1.1.4 點擊小圓圈滾動圖片

html

css

js

for (var i = 0; i < ul.children.length; i++) {// 創建一個小livar li = this.document.createElement('li');//記錄當前小圓圈的索引號 通過自定義屬性來做li.setAttribute('index', i);// 把小li插入到ol里面ol.appendChild(li);// 4. 小圓圈的排他思想 我們可以直接生成小圓圈的同時直接綁定點擊事件li.addEventListener('click', function () {// 干掉所有人 把所有的小li 清除 current 類名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ' ';}// 留下我自己 當前的小li 設置current 類名this.className = 'current';// 5. 點擊小圓圈，移動圖片 當然移動的是 ul// ul 的移動距離 小圓圈的索引號 乘以 圖片的寬度 注意是往左走，所以是負值// 當我們點擊了某個小li 就拿到當前小li 的索引號var index = this.getAttribute('index');//console.log(index); testvar focusWidth = focus.offsetWidth;//console.log(focusWidth); testanimate(ul, -index * focusWidth);})}

1.1.5 點擊右側按鈕一次，就讓圖片滾動一張

將href的值 “#” 改寫成 “javascript:;” ，使其被點擊后不會跳到頁面最頂端

將之前在for循環內部定義的focusWidth提到外面去定義，這樣在外面也可以使用了。

將第一張的圖片復制一份放到最后面

// 6. 點擊右側按鈕一次，就讓圖片滾動一張var num = 0;arrow_r.addEventListener('click', function () {// alert('1'); test// 如果走到了最后復制的一張圖片，此時，我們的ul 要快速復原 left 改為 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth);})

1.1.6 克隆第一張圖片

雖然右側按鈕的功能實現了，但我們還有代碼改進的空間。
問題1： 我們的小li是直接在結構里面復制了一份，這樣動態生成的小圓點也會隨之增加。
問題2： 我們不知道里面到底有幾張圖片，在結構復制一份就寫死了，能不能再自動化一些。

把之前在HTML文件里復制的第一張圖片刪掉。

// 6. 克隆第一張圖片(li)放到ul 最后面var first = ul.children[0].cloneNode(true);ul.appendChild(first);

把該段代碼寫到上一段代碼的前面。
因為在動態生成小圓圈之后再克隆了一份圖片，所以小圓圈不會多一個。

1.1.7 點擊右側按鈕，小圓圈跟隨變化

// 7. 點擊右側按鈕一次，就讓圖片滾動一張var num = 0;// circle 控制小圓圈的播放var circle = 0;arrow_r.addEventListener('click', function () {// alert('1'); test// 如果走到了最后復制的一張圖片，此時，我們的ul 要快速復原 left 改為 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth);// 8. 點擊右側按鈕，小圓圈跟隨一起變化，可以再聲明一個變量控制小圓圈的播放circle++;// 如果circle == 4 說明走到最后我們克隆的這張圖片了 我們就復原為0if (circle == ol.children.length) {circle = 0;}// 先清除其余小圓圈的current類名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下當前的小圓圈的current類名ol.children[circle].className = 'current';})

小bug

1.當我們點擊第三個小圓圈會顯示第3張圖片，然后點擊右側按鈕，圖片卻顯示第2張。這是因為我們播放下一張是由num控制的，而num這一個變量和之前做的點擊小圓圈事件沒有任何關系，所以它們就出現差異。

// 4. 小圓圈的排他思想 我們可以直接生成小圓圈的同時直接綁定點擊事件li.addEventListener('click', function () {// 干掉所有人 把所有的小li 清除 current 類名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ' ';}// 留下我自己 當前的小li 設置current 類名this.className = 'current';// 5. 點擊小圓圈，移動圖片 當然移動的是 ul// ul 的移動距離 小圓圈的索引號 乘以 圖片的寬度 注意是往左走，所以是負值// 當我們點擊了某個小li 就拿到當前小li 的索引號var index = this.getAttribute('index');//console.log(index); test//當我們點擊了某個小li 就要把這個小li 的索引號給 numnum = index;//當我們點擊了某個小li 就要把這個小li 的索引號給 circle circle是控制小圓圈自動播放circle = index;animate(ul, -index * focusWidth);})

1.1.8 左側按鈕功能實現

// 7. 點擊右側按鈕一次，就讓圖片滾動一張var num = 0;// circle 控制小圓圈的播放var circle = 0;arrow_r.addEventListener('click', function () {// alert('1'); test// 如果走到了最后復制的一張圖片，此時，我們的ul 要快速復原 left 改為 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth);// 8. 點擊右側按鈕，小圓圈跟隨一起變化，可以再聲明一個變量控制小圓圈的播放circle++;// 如果circle == 4 說明走到最后我們克隆的這張圖片了 我們就復原為0// if (circle == ol.children.length) {// circle = 0;// }// 代碼優化 三元表達式circle = circle == ol.children.length ? 0 : circle;// 調用函數circleChange();})// 9. 左側按鈕做法arrow_l.addEventListener('click', function () {// alert('1'); test// 如果走到了最后復制的一張圖片，此時，我們的ul 要快速復原 left 改為 0if (num == 0) {num = ul.children.length - 1;// ul向左走為負值ul.style.left = -num * focusWidth + 'px';}num--;animate(ul, -num * focusWidth);// 8. 點擊右側按鈕，小圓圈跟隨一起變化，可以再聲明一個變量控制小圓圈的播放circle--;// // 如果circle < 0 說明第一張圖片 則小圓圈要改為第4個小圓圈// if (circle < 0) {// circle = ol.children.length - 1;// }// 代碼優化 三元表達式circle = circle < 0 ? ol.children.length - 1 : circle;// 調用函數circleChange();})// 優化 左右按鈕的小圓圈排他思想代碼一樣 就封裝為一個函數，調用函數 減少代碼重復量function circleChange() {// 先清除其余小圓圈的current類名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下當前的小圓圈的current類名ol.children[circle].className = 'current';}

1.1.9 自動播放功能

// 10. 自動播放輪播圖var timer = setInterval(function () {// 手動調用點擊事件arrow_r.click();}, 2000);

鼠標經過 focus 就停止定時器
鼠標離開 focus 就開啟定時器

1.2 節流閥

// flag 節流閥var flag = true;arrow_r.addEventListener('click', function () {if (flag) {flag = false; // 關閉節流閥// alert('1'); test// 如果走到了最后復制的一張圖片，此時，我們的ul 要快速復原 left 改為 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth, function () {flag = true; // 打開節流閥});// 8. 點擊右側按鈕，小圓圈跟隨一起變化，可以再聲明一個變量控制小圓圈的播放circle++;// 如果circle == 4 說明走到最后我們克隆的這張圖片了 我們就復原為0// if (circle == ol.children.length) {// circle = 0;// }// 代碼優化 三元表達式circle = circle == ol.children.length ? 0 : circle;// 調用函數circleChange();}})

1.3 代碼展示

html

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="index.css"><!-- 這個animate.js 必須寫到 index.js的上面引入 --><script src="js/animate.js"></script><script src="js/index.js"></script> </head><body><div class="focus"><!-- 左側按鈕 --><a href="javascript:;" class="arrow-l">&lt;</a><!-- 右側按鈕 --><a href="javascript:;" class="arrow-r">&gt;</a><!-- 核心的滾動區域 --><ul><li><a href="#"><img src="../images/focus.jpg" alt=""></a></li><li><a href="#"><img src="../images/focus1.jpg" alt=""></a></li><li><a href="#"><img src="../images/focus2.jpg" alt=""></a></li><li><a href="#"><img src="../images/focus3.jpg" alt=""></a></li></ul><!-- 小圓圈 --><ol class="circle"></ol></div> </body></html>

css

* {margin: 0;padding: 0; }li {list-style: none; }a {text-decoration: none; }.focus {position: relative;width: 721px;height: 455px;background-color: pink;margin: 100px auto;overflow: hidden; }.focus ul {position: absolute;top: 0;left: 0;/* 使輪播圖的使用圖片都放到一行上去就需要擴大父盒子的寬度 */width: 600%; }.focus ul li {float: left; }.arrow-l, .arrow-r {display: none;position: absolute;top: 50%;margin-top: -20px;width: 24px;height: 40px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 40px;color: #fff;font-size: 18px;z-index: 2; }.arrow-r {right: 0; }.circle {position: absolute;bottom: 10px;left: 50px; }.circle li {float: left;width: 8px;height: 8px;border: 2px solid rgba(255, 255, 255, 0.5);margin: 0 3px;border-radius: 50%;/*鼠標經過顯示小手*/cursor: pointer; }.current {background: #fff; }

js

// 等頁面所有元素加載完后再執行js window.addEventListener('load', function () {//this.alert('1'); // 測試// 1. 獲取元素var arrow_l = this.document.querySelector('.arrow-l');var arrow_r = this.document.querySelector('.arrow-r');var focus = document.querySelector('.focus');var focusWidth = focus.offsetWidth;//console.log(focusWidth); test// 2. 鼠標經過focus 就顯示隱藏的左右按鈕focus.addEventListener('mouseenter', function () {arrow_l.style.display = 'block';arrow_r.style.display = 'block';clearInterval(timer);timer = null; // 清除定時器變量})// 鼠標離開focus 就隱藏左右按鈕focus.addEventListener('mouseleave', function () {arrow_l.style.display = 'none';arrow_r.style.display = 'none';timer = setInterval(function () {// 手動調用點擊事件arrow_r.click();}, 2000);})// 3. 動態生成小圓圈，有幾張圖片我們就生成幾個小圓圈var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle');// console.log(ul.children.length); testfor (var i = 0; i < ul.children.length; i++) {// 創建一個小livar li = this.document.createElement('li');//記錄當前小圓圈的索引號 通過自定義屬性來做li.setAttribute('index', i);// 把小li插入到ol里面ol.appendChild(li);// 4. 小圓圈的排他思想 我們可以直接生成小圓圈的同時直接綁定點擊事件li.addEventListener('click', function () {// 干掉所有人 把所有的小li 清除 current 類名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ' ';}// 留下我自己 當前的小li 設置current 類名this.className = 'current';// 5. 點擊小圓圈，移動圖片 當然移動的是 ul// ul 的移動距離 小圓圈的索引號 乘以 圖片的寬度 注意是往左走，所以是負值// 當我們點擊了某個小li 就拿到當前小li 的索引號var index = this.getAttribute('index');//console.log(index); test//當我們點擊了某個小li 就要把這個小li 的索引號給 numnum = index;//當我們點擊了某個小li 就要把這個小li 的索引號給 circle circle是控制小圓圈自動播放circle = index;animate(ul, -index * focusWidth);})}// 把ol的第一個小li設置類名為 currentol.children[0].className = 'current';// 6. 克隆第一張圖片(li)放到ul 最后面var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 7. 點擊右側按鈕一次，就讓圖片滾動一張var num = 0;// circle 控制小圓圈的播放var circle = 0;// flag 節流閥var flag = true;arrow_r.addEventListener('click', function () {if (flag) {flag = false; // 關閉節流閥// alert('1'); test// 如果走到了最后復制的一張圖片，此時，我們的ul 要快速復原 left 改為 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth, function () {flag = true; // 打開節流閥});// 8. 點擊右側按鈕，小圓圈跟隨一起變化，可以再聲明一個變量控制小圓圈的播放circle++;// 如果circle == 4 說明走到最后我們克隆的這張圖片了 我們就復原為0// if (circle == ol.children.length) {// circle = 0;// }// 代碼優化 三元表達式circle = circle == ol.children.length ? 0 : circle;// 調用函數circleChange();}})// 9. 左側按鈕做法arrow_l.addEventListener('click', function () {if (flag) {flag = false;// alert('1'); test// 如果走到了最后復制的一張圖片，此時，我們的ul 要快速復原 left 改為 0if (num == 0) {num = ul.children.length - 1;// ul向左走為負值ul.style.left = -num * focusWidth + 'px';}num--;animate(ul, -num * focusWidth, function () {flag = true;});// 8. 點擊右側按鈕，小圓圈跟隨一起變化，可以再聲明一個變量控制小圓圈的播放circle--;// // 如果circle < 0 說明第一張圖片 則小圓圈要改為第4個小圓圈// if (circle < 0) {// circle = ol.children.length - 1;// }// 代碼優化 三元表達式circle = circle < 0 ? ol.children.length - 1 : circle;// 調用函數circleChange();}})// 優化 左右按鈕的小圓圈排他思想代碼一樣 就封裝為一個函數，調用函數 減少代碼重復量function circleChange() {// 先清除其余小圓圈的current類名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下當前的小圓圈的current類名ol.children[circle].className = 'current';}// 10. 自動播放輪播圖var timer = setInterval(function () {// 手動調用點擊事件arrow_r.click();}, 2000); })

animate.js

function animate(obj, target, callback) {// console.log(callback); callback = function() {} 調用的時候 callback()// 先清除以前的定時器，只保留當前的一個定時器執行clearInterval(obj.timer);obj.timer = setInterval(function () {// 步長值寫到定時器的里面// 把我們步長值改為整數 不要出現小數的問題// var step = Math.ceil((target - obj.offsetLeft) / 10);var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {// 停止動畫 本質是停止定時器clearInterval(obj.timer);// 回調函數寫到定時器結束里面// if (callback) {// // 調用函數// callback();// }callback && callback(); // 短路運算符 如果callback 為true 就會執行后面的callback()}// 把每次加1 這個步長值改為一個慢慢變小的值 步長公式：(目標值 - 現在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15); }

2. 案例：返回頂部

在之前 仿淘寶固定側邊欄的案例 中實現

js

// 3. 當我們點擊了返回頂部模塊，就讓窗口滾動的頁面的最上方goBack.addEventListener('click', function () {// alert(1);// 里面的x和y 不跟單位的 直接寫數字即可// window.scroll(0, 0);// 因為是窗口滾動 所以對象是windowanimate(window, 0);});// 動畫函數function animate(obj, target, callback) {// console.log(callback); callback = function() {} 調用的時候 callback()// 先清除以前的定時器，只保留當前的一個定時器執行clearInterval(obj.timer);obj.timer = setInterval(function () {// 步長值寫到定時器的里面// 把我們步長值改為整數 不要出現小數的問題// var step = Math.ceil((target - obj.offsetLeft) / 10);var step = (target - window.pageYOffset) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset == target) {// 停止動畫 本質是停止定時器clearInterval(obj.timer);// 回調函數寫到定時器結束里面// if (callback) {// // 調用函數// callback();// }callback && callback(); // 短路運算符 如果callback 為true 就會執行后面的callback()}// 把每次加1 這個步長值改為一個慢慢變小的值 步長公式：(目標值 - 現在的位置) / 10// obj.style.left = window.pageYOffset + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);}

3. 案例：筋斗云

鼠標經過某個小li，筋斗云跟這到當前小i位置
鼠標離開這個小li，筋斗云復原為原來的位置
鼠標點擊了某個小li，筋斗云就會留在點擊這個小li的位置

3.1 案例分析

3.2 代碼實現

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}body {background-color: black;}.c-nav {width: 900px;height: 42px;background: #fff url(images/rss.png) no-repeat right center;margin: 100px auto;border-radius: 5px;position: relative;}.c-nav ul {position: absolute;}.c-nav li {float: left;width: 83px;text-align: center;line-height: 42px;}.c-nav li a {color: #333;text-decoration: none;display: inline-block;height: 42px;}.c-nav li a:hover {color: white;}.cloud {position: absolute;left: 0;top: 0;width: 83px;height: 42px;background: url(images/cloud.gif) no-repeat;}</style><script src="animate.js"></script><script>window.addEventListener('load', function () {// 1. 獲取元素var cloud = document.querySelector('.cloud');var c_nav = document.querySelector('.c-nav');var lis = c_nav.querySelectorAll('li');// 這個current 做為筋斗云的起始位置var current = 0;// 2. 給所有的小li綁定事件 for (var i = 0; i < lis.length; i++) {// (1) 鼠標經過把當前小li 的位置做為目標值lis[i].addEventListener('mouseenter', function () {animate(cloud, this.offsetLeft);});// (2) 鼠標離開就回到起始的位置 lis[i].addEventListener('mouseleave', function () {animate(cloud, current);});// (3) 當我們鼠標點擊，就把當前位置做為目標值lis[i].addEventListener('click', function () {current = this.offsetLeft;});}})</script> </head><body><div class="c-nav"><span class="cloud"></span><ul><li class="current"><a href="">首頁新聞</a></li><li><a href="#">師資力量</a></li><li><a href="#">活動策劃</a></li><li><a href="#">企業文化</a></li><li><a href="#">招聘信息</a></li><li><a href="#">公司簡介</a></li><li><a href="#">我是佩奇</a></li><li><a href="#">啥是佩奇</a></li></ul></div> </body></html>

總結

以上是生活随笔為你收集整理的JavaScript—— 常见网页特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。