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

javascript

JavaScript—— 常见网页特效

發(fā)布時(shí)間：2024/8/1 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript—— 常见网页特效小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

一、常見網(wǎng)頁(yè)特效

1. 案例：網(wǎng)頁(yè)輪播圖

輪播圖也稱為焦點(diǎn)圖，是網(wǎng)頁(yè)中比較常見的網(wǎng)頁(yè)特效。
功能需求：

鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕。

點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，以此類推，左側(cè)按鈕同理。

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

點(diǎn)擊小圓圈，可以播放相應(yīng)圖片。

鼠標(biāo)不經(jīng)過輪播圖，輪播圖也會(huì)自動(dòng)播放圖片。

鼠標(biāo)經(jīng)過，輪播圖模塊，自動(dòng)播放停止。

1.1 案例分析

1.1.1 左右按鈕的顯示與隱藏

1.1.2 動(dòng)態(tài)生成小圓圈

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

1.1.3 小圓圈的排他思想

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

把這段代碼寫到上一段代碼的for循環(huán)里面

1.1.4 點(diǎn)擊小圓圈滾動(dòng)圖片

html

css

js

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

1.1.5 點(diǎn)擊右側(cè)按鈕一次，就讓圖片滾動(dòng)一張

將href的值 “#” 改寫成 “javascript:;” ，使其被點(diǎn)擊后不會(huì)跳到頁(yè)面最頂端

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

將第一張的圖片復(fù)制一份放到最后面

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

1.1.6 克隆第一張圖片

雖然右側(cè)按鈕的功能實(shí)現(xiàn)了，但我們還有代碼改進(jìn)的空間。
問題1： 我們的小li是直接在結(jié)構(gòu)里面復(fù)制了一份，這樣動(dòng)態(tài)生成的小圓點(diǎn)也會(huì)隨之增加。
問題2： 我們不知道里面到底有幾張圖片，在結(jié)構(gòu)復(fù)制一份就寫死了，能不能再自動(dòng)化一些。

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

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

把該段代碼寫到上一段代碼的前面。
因?yàn)樵趧?dòng)態(tài)生成小圓圈之后再克隆了一份圖片，所以小圓圈不會(huì)多一個(gè)。

1.1.7 點(diǎn)擊右側(cè)按鈕，小圓圈跟隨變化

小bug

1.當(dāng)我們點(diǎn)擊第三個(gè)小圓圈會(huì)顯示第3張圖片，然后點(diǎn)擊右側(cè)按鈕，圖片卻顯示第2張。這是因?yàn)槲覀儾シ畔乱粡埵怯蒼um控制的，而num這一個(gè)變量和之前做的點(diǎn)擊小圓圈事件沒有任何關(guān)系，所以它們就出現(xiàn)差異。

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

1.1.8 左側(cè)按鈕功能實(shí)現(xiàn)

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

1.1.9 自動(dòng)播放功能

// 10. 自動(dòng)播放輪播圖var timer = setInterval(function () {// 手動(dòng)調(diào)用點(diǎn)擊事件arrow_r.click();}, 2000);

鼠標(biāo)經(jīng)過 focus 就停止定時(shí)器
鼠標(biāo)離開 focus 就開啟定時(shí)器

1.2 節(jié)流閥

// flag 節(jié)流閥var flag = true;arrow_r.addEventListener('click', function () {if (flag) {flag = false; // 關(guān)閉節(jié)流閥// alert('1'); test// 如果走到了最后復(fù)制的一張圖片，此時(shí)，我們的ul 要快速?gòu)?fù)原 left 改為 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth, function () {flag = true; // 打開節(jié)流閥});// 8. 點(diǎn)擊右側(cè)按鈕，小圓圈跟隨一起變化，可以再聲明一個(gè)變量控制小圓圈的播放circle++;// 如果circle == 4 說明走到最后我們克隆的這張圖片了我們就復(fù)原為0// if (circle == ol.children.length) {// circle = 0;// }// 代碼優(yōu)化三元表達(dá)式circle = circle == ol.children.length ? 0 : circle;// 調(diào)用函數(shù)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"><script src="js/animate.js"></script><script src="js/index.js"></script> </head><body><div class="focus"><a href="javascript:;" class="arrow-l"><</a><a href="javascript:;" class="arrow-r">></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;/* 使輪播圖的使用圖片都放到一行上去就需要擴(kuò)大父盒子的寬度 */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%;/*鼠標(biāo)經(jīng)過顯示小手*/cursor: pointer; }.current {background: #fff; }

js

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

animate.js

2. 案例：返回頂部

在之前仿淘寶固定側(cè)邊欄的案例中實(shí)現(xiàn)

js

// 3. 當(dāng)我們點(diǎn)擊了返回頂部模塊，就讓窗口滾動(dòng)的頁(yè)面的最上方goBack.addEventListener('click', function () {// alert(1);// 里面的x和y 不跟單位的直接寫數(shù)字即可// window.scroll(0, 0);// 因?yàn)槭谴翱跐L動(dòng) 所以對(duì)象是windowanimate(window, 0);});// 動(dòng)畫函數(shù)function animate(obj, target, callback) {// console.log(callback); callback = function() {} 調(diào)用的時(shí)候 callback()// 先清除以前的定時(shí)器，只保留當(dāng)前的一個(gè)定時(shí)器執(zhí)行clearInterval(obj.timer);obj.timer = setInterval(function () {// 步長(zhǎng)值寫到定時(shí)器的里面// 把我們步長(zhǎng)值改為整數(shù) 不要出現(xiàn)小數(shù)的問題// 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) {// 停止動(dòng)畫本質(zhì)是停止定時(shí)器clearInterval(obj.timer);// 回調(diào)函數(shù)寫到定時(shí)器結(jié)束里面// if (callback) {// // 調(diào)用函數(shù)// callback();// }callback && callback(); // 短路運(yùn)算符如果callback 為true 就會(huì)執(zhí)行后面的callback()}// 把每次加1 這個(gè)步長(zhǎng)值改為一個(gè)慢慢變小的值步長(zhǎng)公式：(目標(biāo)值 - 現(xiàn)在的位置) / 10// obj.style.left = window.pageYOffset + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);}

3. 案例：筋斗云

鼠標(biāo)經(jīng)過某個(gè)小li，筋斗云跟這到當(dāng)前小i位置
鼠標(biāo)離開這個(gè)小li，筋斗云復(fù)原為原來(lái)的位置
鼠標(biāo)點(diǎn)擊了某個(gè)小li，筋斗云就會(huì)留在點(diǎn)擊這個(gè)小li的位置

3.1 案例分析

3.2 代碼實(shí)現(xiàn)

<!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');// 這個(gè)current 做為筋斗云的起始位置var current = 0;// 2. 給所有的小li綁定事件 for (var i = 0; i < lis.length; i++) {// (1) 鼠標(biāo)經(jīng)過把當(dāng)前小li 的位置做為目標(biāo)值lis[i].addEventListener('mouseenter', function () {animate(cloud, this.offsetLeft);});// (2) 鼠標(biāo)離開就回到起始的位置 lis[i].addEventListener('mouseleave', function () {animate(cloud, current);});// (3) 當(dāng)我們鼠標(biāo)點(diǎn)擊，就把當(dāng)前位置做為目標(biāo)值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="">首頁(yè)新聞</a></li><li><a href="#">師資力量</a></li><li><a href="#">活動(dòng)策劃</a></li><li><a href="#">企業(yè)文化</a></li><li><a href="#">招聘信息</a></li><li><a href="#">公司簡(jiǎn)介</a></li><li><a href="#">我是佩奇</a></li><li><a href="#">啥是佩奇</a></li></ul></div> </body></html>

總結(jié)

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

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