當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript—— 常见网页特效
生活随笔
收集整理的這篇文章主要介紹了
JavaScript—— 常见网页特效
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目錄
- 一、常見網(wǎng)頁特效
- 1. 案例：網(wǎng)頁輪播圖
- 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)頁特效
1. 案例：網(wǎng)頁輪播圖
輪播圖也稱為焦點(diǎn)圖，是網(wǎng)頁中比較常見的網(wǎ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
1.1.5 點(diǎn)擊右側(cè)按鈕一次，就讓圖片滾動(dòng)一張
將href的值 “#” 改寫成 “javascript:;” ，使其被點(diǎn)擊后不會(huì)跳到頁面最頂端
將之前在for循環(huán)內(nèi)部定義的focusWidth提到外面去定義，這樣在外面也可以使用了。
將第一張的圖片復(fù)制一份放到最后面
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ù)制的第一張圖片刪掉。
把該段代碼寫到上一段代碼的前面。
因?yàn)樵趧?dòng)態(tài)生成小圓圈之后再克隆了一份圖片，所以小圓圈不會(huì)多一個(gè)。
1.1.7 點(diǎn)擊右側(cè)按鈕，小圓圈跟隨變化
// 7. 點(diǎn)擊右側(cè)按鈕一次，就讓圖片滾動(dòng)一張var num = 0;// circle 控制小圓圈的播放var circle = 0;arrow_r.addEventListener('click', function () {// alert('1'); test// 如果走到了最后復(fù)制的一張圖片，此時(shí)，我們的ul 要快速復(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ù)原為0if (circle == ol.children.length) {circle = 0;}// 先清除其余小圓圈的current類名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下當(dāng)前的小圓圈的current類名ol.children[circle].className = 'current';})小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 要快速復(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 要快速復(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 要快速復(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"><!-- 這個(gè)animate.js 必須寫到 index.js的上面引入 --><script src="js/animate.js"></script><script src="js/index.js"></script> </head><body><div class="focus"><!-- 左側(cè)按鈕 --><a href="javascript:;" class="arrow-l"><</a><!-- 右側(cè)按鈕 --><a href="javascript:;" class="arrow-r">></a><!-- 核心的滾動(dòng)區(qū)域 --><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
// 等頁面所有元素加載完后再執(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) 通過自定義屬性來做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 要快速復(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 要快速復(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
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 () {// 步長值寫到定時(shí)器的里面// 把我們步長值改為整數(shù) 不要出現(xiàn)小數(shù)的問題// 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) {// 停止動(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è)步長值改為一個(gè)慢慢變小的值 步長公式：(目標(biāo)值 - 現(xiàn)在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15); }2. 案例：返回頂部
在之前 仿淘寶固定側(cè)邊欄的案例 中實(shí)現(xiàn)
js
// 3. 當(dāng)我們點(diǎn)擊了返回頂部模塊，就讓窗口滾動(dòng)的頁面的最上方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 () {// 步長值寫到定時(shí)器的里面// 把我們步長值改為整數(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è)步長值改為一個(gè)慢慢變小的值 步長公式：(目標(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ù)原為原來的位置
鼠標(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="">首頁新聞</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="#">公司簡介</a></li><li><a href="#">我是佩奇</a></li><li><a href="#">啥是佩奇</a></li></ul></div> </body></html>總結(jié)
以上是生活随笔為你收集整理的JavaScript—— 常见网页特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： weblogic部署模式
- 下一篇： FullCalendar - 开源的多功