當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

PC端和移动端网页特效，fastclick插件，Swiper插件，Bootstrap等框架，本地存储

發布時間：2024/1/1 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 PC端和移动端网页特效，fastclick插件，Swiper插件，Bootstrap等框架，本地存储小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

PC 端網頁特效

元素偏移量 offset 系列

1.offset 系列常用屬性

2.offset 與 style 區別

?3.計算鼠標在盒子內的坐標

4.模態框拖拽

?5.京東商品放大鏡

元素可視區 client 系列

1. client 系列常用屬性

2.flexible.js分析（移動適配rem）

3.立即執行函數

4.像素比和pageshow事件

元素滾動 scroll 系列

1. scroll 系列屬性

?2.被頁面卷去的頭部

3.仿淘寶固定側邊欄

三大系列總結

mouseenter 和mouseover的區別

?動畫函數封裝

1.動畫原理

2.動畫函數簡單封裝

3.動畫函數給不同元素記錄不同定時器

4.緩動動畫

5.緩動動畫多個目標值之間移動

6.動畫函數添加回調函數并封裝到單獨的js文件

常見網頁特效案例

1.網頁輪播圖

2.返回頂部

移動端網頁特效

觸屏事件

1.觸屏事件touch

2.觸摸事件對象（TouchEvent）

3.移動端拖動元素

移動端常見特效

1.移動端輪播圖

2.classList 屬性

移動端常用開發插件

click 延時解決方案：

Swiper 插件的使用（輪播圖）

移動端常用開發框架

Bootstrap 框架

本地存儲

window.sessionStorage

window.localStorage

?記住用戶名

PC 端網頁特效

元素偏移量 offset 系列

offset 翻譯過來就是偏移量，我們使用 offset 系列相關屬性可以動態的得到該元素的位置（偏移）、大小等。 ?

可以獲得元素距離帶有定位父元素的位置 ?

可以獲得元素自身的大小（寬度高度）

注意：返回的數值都不帶單位。

1.offset 系列常用屬性

<body><div class="father"><div class="son"></div></div><div class="w"></div><script>// offset 系列var father = document.querySelector('.father');var son = document.querySelector('.son');// 1.可以得到元素的偏移位置，返回的不帶單位的數值 console.log(father.offsetTop);console.log(father.offsetLeft);// 它以帶有定位的父親為準，如果沒有父親或者父親沒有定位則以 body 為準console.log(son.offsetLeft);var w = document.querySelector('.w');// 2.可以得到元素的大小：寬度和高度，是包含padding + border + width console.log(w.offsetWidth);console.log(w.offsetHeight);// 3. 返回帶有定位的父親否則返回的是bodyconsole.log(son.offsetParent); // 返回帶有定位的父親否則返回的是bodyconsole.log(son.parentNode); // 返回父親是最近一級的父親親爸爸不管父親有沒有定位</script> </body>

2.offset 與 style 區別

?3.計算鼠標在盒子內的坐標

<body><div class="box"></div><script>// 我們在盒子內點擊，想要得到鼠標距離盒子左右的距離。// 首先得到鼠標在頁面中的坐標（ e.pageX, e.pageY）// 其次得到盒子在頁面中的距離(box.offsetLeft, box.offsetTop)// 用鼠標距離頁面的坐標減去盒子在頁面中的距離，得到鼠標在盒子內的坐標var box = document.querySelector('.box');box.addEventListener('mousemove', function(e) {// console.log(e.pageX);// console.log(e.pageY);// console.log(box.offsetLeft);var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;this.innerHTML = 'x坐標是' + x + ' y坐標是' + y;})</script> </body>

4.模態框拖拽

點擊彈出層，會彈出模態框，并且顯示灰色半透明的遮擋層。

點擊關閉按鈕，可以關閉模態框，并且同時關閉灰色半透明遮擋層。

鼠標放到模態框最上面一行，可以按住鼠標拖拽模態框在頁面中移動。

鼠標松開，可以停止拖動模態框移動。

?5.京東商品放大鏡

整個案例可以分為三個功能模塊

先獲取元素

<div class="preview_img"><img src="upload/s3.png" alt=""><div class="mask"></div><div class="big"><img src="upload/big.jpg" alt="" class="bigImg"></div></div> var preview_img = document.querySelector('.preview_img'); //包括圖片和遮擋層的盒子var mask = document.querySelector('.mask'); //遮擋層var big = document.querySelector('.big'); //旁邊展示圖片的大盒子

（1）鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能

//preview_img包括圖片和遮擋層的盒子//mask遮擋層//big展示圖片的大盒子// 1. 當我們鼠標經過 preview_img 就顯示和隱藏 mask 遮擋層和 big 大盒子preview_img.addEventListener('mouseover', function() {mask.style.display = 'block';big.style.display = 'block';})preview_img.addEventListener('mouseout', function() {mask.style.display = 'none';big.style.display = 'none';})

（2）黃色的遮擋層跟隨鼠標功能。

（3）移動黃色遮擋層，大圖片跟隨移動功能。

// 2. 鼠標移動的時候，讓黃色的盒子跟著鼠標來走preview_img.addEventListener('mousemove', function(e) {// (1). 先計算出鼠標在盒子內的坐標var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;// console.log(x, y);// (2) 減去盒子高度 300的一半是 150 就是我們mask 的最終 left 和top值了// (3) 我們mask 移動的距離var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// (4) 如果x 坐標小于了0 就讓他停在0 的位置// 遮擋層的最大移動距離var maskMax = preview_img.offsetWidth - mask.offsetWidth;if (maskX <= 0) {maskX = 0;} else if (maskX >= maskMax) {maskX = maskMax;}if (maskY <= 0) {maskY = 0;} else if (maskY >= maskMax) {maskY = maskMax;}mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';// 3. 大圖片的移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離// 大圖var bigIMg = document.querySelector('.bigImg');// 大圖片最大移動距離var bigMax = bigIMg.offsetWidth - big.offsetWidth;// 大圖片的移動距離 X Yvar bigX = maskX * bigMax / maskMax;var bigY = maskY * bigMax / maskMax;bigIMg.style.left = -bigX + 'px';bigIMg.style.top = -bigY + 'px';})

元素可視區 client 系列

client 翻譯過來就是客戶端，我們使用 client 系列的相關屬性來獲取元素可視區的相關信息。通過 client 系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等

1. client 系列常用屬性

2.flexible.js分析（移動適配rem）

(function flexible(window, document) {// 獲取的html 的根元素var docEl = document.documentElement// dpr 物理像素比var dpr = window.devicePixelRatio || 1// adjust body font size 設置我們body 的字體大小function setBodyFontSize() {// 如果頁面中有body 這個元素就設置body的字體大小if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'} else {// 如果頁面中沒有body 這個元素，則等著我們頁面主要的DOM元素加載完畢再去設置body// 的字體大小document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10 設置我們html 元素的文字大小function setRemUnit() {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resize 當我們頁面尺寸大小發生變化的時候，要重新設置下rem 的大小window.addEventListener('resize', setRemUnit)// pageshow 是我們重新加載頁面觸發的事件window.addEventListener('pageshow', function(e) {// e.persisted 返回的是true 就是說如果這個頁面是從緩存取過來的頁面，也需要從新計算一下rem 的大小if (e.persisted) {setRemUnit()}})// detect 0.5px supports 有些移動端的瀏覽器不支持0.5像素的寫法if (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)} }(window, document))

3.立即執行函數

主要作用：創建一個獨立的作用域。避免了命名沖突問題

4.像素比和pageshow事件

? ?下面三種情況都會刷新頁面都會觸發 load 事件。

? ? 1.a標簽的超鏈接

? ? 2.F5或者刷新按鈕（強制刷新）

? ? 3.前進后退按鈕

? ? ? ? 但是火狐中，有個特點，有個“往返緩存”，這個緩存中不僅保存著頁面數據，還保存了DOM和JavaScript的狀態；實際上是將整個頁面都保存在了內存里。

? ? ? ?所以此時后退按鈕不能刷新頁面。

? ? ? ?此時可以使用 pageshow事件來觸發。，這個事件在頁面顯示時觸發，無論頁面是否來自緩存。在重新加載頁面中，pageshow會在load事件觸發后觸發；根據事件對象中的persisted來判斷是否是緩存中的頁面觸發的pageshow事件，注意這個事件給window添加?

<body><script>// console.log(window.devicePixelRatio);window.addEventListener('pageshow', function() {alert(11);})</script><a href="http://www.itcast.cn">鏈接</a> </body>

元素滾動 scroll 系列

1. scroll 系列屬性

?2.被頁面卷去的頭部

如果瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條。當滾動條向下滾動時，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部。滾動條在滾動時會觸發 onscroll 事件。

<body><div>我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容</div><script>// scroll 系列var div = document.querySelector('div');console.log(div.scrollHeight);console.log(div.clientHeight);// scroll滾動事件當我們滾動條發生變化會觸發的事件div.addEventListener('scroll', function() {console.log(div.scrollTop);})</script> </body>

3.仿淘寶固定側邊欄

（1）原先側邊欄是絕對定位

（2）當頁面滾動到一定位置，側邊欄改為固定定位

（3）頁面繼續滾動，會讓返回頂部顯示出來

<body><div class="slider-bar"><span class="goBack">返回頂部</span></div><div class="header w">頭部區域</div><div class="banner w">banner區域</div><div class="main w">主體部分</div><script>//1. 獲取元素var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');// banner.offestTop 就是被卷去頭部的大小一定要寫到滾動的外面var bannerTop = banner.offsetTop// 當我們側邊欄固定定位之后應該變化的數值var sliderbarTop = sliderbar.offsetTop - bannerTop;// 獲取main 主體元素var main = document.querySelector('.main');var goBack = document.querySelector('.goBack');var mainTop = main.offsetTop;// 2. 頁面滾動事件 scrolldocument.addEventListener('scroll', function() {// console.log(11);// window.pageYOffset 頁面被卷去的頭部// console.log(window.pageYOffset);// 3 .當我們頁面被卷去的頭部大于等于了 172 此時側邊欄就要改為固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}// 4. 當我們頁面滾動到main盒子，就顯示 goback模塊if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})// 當我們點擊了返回頂部模塊，就讓窗口滾動的頁面的最上方goBack.addEventListener('click', function() {// 里面的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();}// 把每次加1 這個步長值改為一個慢慢變小的值 // 步長公式：(目標值 - 現在的位置) / 10// obj.style.left = window.pageYOffset + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);}</script> </body>

三大系列總結

（1）offset系列經常用于獲得元素位置 ? ?offsetLeft ?offsetTop

（2）client 經常用于獲取元素大小 ?clientWidth ?clientHeight

（3）scroll 經常用于獲取滾動距離 ?scrollTop ?scrollLeft ?

注意頁面滾動的距離通過 window.pageXOffset ?獲得

mouseenter 和mouseover的區別

?動畫函數封裝

1.動畫原理

<body><div></div><script>// 動畫原理：通過定時器 setInterval() 不斷移動盒子位置。// 1. 獲得盒子當前位置 // 2. 讓盒子在當前位置加上1個移動距離// 3. 利用定時器不斷重復這個操作// 4. 加一個結束定時器的條件// 5. 注意此元素需要添加定位，才能使用element.style.leftvar div = document.querySelector('div');var timer = setInterval(function() {if (div.offsetLeft >= 400) {// 停止動畫本質是停止定時器clearInterval(timer);}div.style.left = div.offsetLeft + 1 + 'px';}, 30);</script> </body>

2.動畫函數簡單封裝

注意函數需要傳遞2個參數，動畫對象和移動到的距離。

// 簡單動畫函數封裝obj目標對象 target 目標位置function animate(obj, target) {var timer = setInterval(function() {if (obj.offsetLeft >= target) {// 停止動畫本質是停止定時器clearInterval(timer);}obj.style.left = obj.offsetLeft + 1 + 'px';}, 30);}var div = document.querySelector('div');var span = document.querySelector('span');// 調用函數animate(div, 300);animate(span, 200);

3.動畫函數給不同元素記錄不同定時器

<body><button>點擊夏雨荷才走</button><div></div><span>夏雨荷</span><script>// var obj = {};// obj.name = 'andy';// 簡單動畫函數封裝obj目標對象 target 目標位置// 給不同的元素指定了不同的定時器function animate(obj, target) {// 當我們不斷的點擊按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器// 解決方案就是讓我們元素只有一個定時器執行// 先清除以前的定時器，只保留當前的一個定時器執行clearInterval(obj.timer);obj.timer = setInterval(function() {if (obj.offsetLeft >= target) {// 停止動畫本質是停止定時器clearInterval(obj.timer);}obj.style.left = obj.offsetLeft + 1 + 'px';}, 30);}var div = document.querySelector('div');var span = document.querySelector('span');var btn = document.querySelector('button');// 調用函數animate(div, 300);btn.addEventListener('click', function() {animate(span, 200);})</script> </body>

4.緩動動畫

<body><button>點擊夏雨荷才走</button><span>夏雨荷</span><script>// 緩動動畫函數封裝obj目標對象 target 目標位置// 思路：// 1. 讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來。// 2. 核心算法：(目標值 - 現在的位置) / 10 做為每次移動的距離步長// 3. 停止的條件是：讓當前盒子位置等于目標位置就停止定時器function animate(obj, target) {// 先清除以前的定時器，只保留當前的一個定時器執行clearInterval(obj.timer);obj.timer = setInterval(function() {// 步長值寫到定時器的里面var step = (target - obj.offsetLeft) / 10;if (obj.offsetLeft == target) {// 停止動畫本質是停止定時器clearInterval(obj.timer);}// 把每次加1 這個步長值改為一個慢慢變小的值 // 步長公式：(目標值 - 現在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);}var span = document.querySelector('span');var btn = document.querySelector('button');btn.addEventListener('click', function() {// 調用函數animate(span, 500);})// 勻速動畫就是盒子是當前的位置 + 固定的值 10 // 緩動動畫就是盒子當前的位置 + 變化的值(目標值 - 現在的位置) / 10）</script> </body>

5.緩動動畫多個目標值之間移動

6.動畫函數添加回調函數并封裝到單獨的js文件

回調函數原理：函數可以作為一個參數。將這個函數作為參數傳到另一個函數里面，當那個函數執行完之后，再執行傳進去的這個函數，這個過程就叫做回調。

回調函數寫的位置：定時器結束的位置。

animate.js文件

常見網頁特效案例

1.網頁輪播圖

功能需求：

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

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

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

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

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

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

7.節流閥

防止輪播圖按鈕連續點擊造成播放過快。

節流閥目的：當上一個函數動畫內容執行完畢，再去執行下一個函數動畫，讓事件無法連續觸發。核心實現思路：利用回調函數，添加一個變量來控制，鎖住函數和解鎖函數。 ?

開始設置一個變量 var flag = true;

If(flag) {flag = false; do something} ? ? ? 關閉水龍頭

利用回調函數動畫執行完畢， flag = true ? ? 打開水龍頭

2.返回頂部

滾動窗口至文檔中的特定位置。

window.scroll(x, y)

注意，里面的x和y 不跟單位，直接寫數字

// 當我們點擊了返回頂部模塊，就讓窗口滾動的頁面的最上方goBack.addEventListener('click', function() {// 里面的x和y 不跟單位的直接寫數字即可// window.scroll(0, 0);// 因為是窗口滾動所以對象是windowanimate(window, 0);});// 動畫函數function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function() {var step = (target - window.pageYOffset) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset == target) {// 停止動畫本質是停止定時器clearInterval(obj.timer);callback && callback();}//移動距離為window.pageYOffset + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);}

移動端網頁特效

觸屏事件

1.觸屏事件touch

2.觸摸事件對象（TouchEvent）

3.移動端拖動元素

移動端常見特效

1.移動端輪播圖

2.classList 屬性

classList屬性是HTML5新增的一個屬性，返回元素的類名。但是ie10以上版本支持。該屬性用于在元素中添加，移除及切換 CSS 類。

移動端常用開發插件

click 延時解決方案：

移動端 click 事件會有 300ms 的延時，原因是移動端屏幕雙擊會縮放(double tap to zoom) 頁面。

?3. 使用插件。 fastclick 插件解決 300ms 延遲。

Swiper 插件的使用（輪播圖）

1.確認插件實現的功能

2.去官網查看使用說明

3.下載插件

4.打開demo實例文件，查看需要引入的相關文件，并且引入

5.復制demo實例文件中的結構html，樣式css以及js代碼

移動端常用開發框架

前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能開發PC端，也能開發移動端

前端常用的移動端插件有 swiper、superslide、iscroll等。

Bootstrap 框架

是一個簡潔、直觀、強悍的前端開發框架，它讓 web 開發更迅速、簡單。它能開發PC端，也能開發移動端

Bootstrap JS插件使用步驟：

1.引入相關js 文件

2.復制HTML 結構

3.修改對應樣式

4.修改相應JS 參數

本地存儲

特性：

1、數據存儲在用戶瀏覽器中

2、設置、讀取方便、甚至頁面刷新不丟失數據

3、容量較大，sessionStorage約5M、localStorage約20M

4、只能存儲字符串，可以將對象JSON.stringify() 編碼后存儲

要實現從 JSON 字符串轉換為 JS 對象，使用 JSON.parse() 方法
要實現從 JS 對象轉換為 JSON 字符串，使用 JSON.stringify() 方法

window.sessionStorage

<body><input type="text"><button class="set">存儲數據</button><button class="get">獲取數據</button><button class="remove">刪除數據</button><button class="del">清空所有數據</button><script>console.log(localStorage.getItem('username'));var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function() {// 當我們點擊了之后，就可以把表單里面的值存儲起來var val = ipt.value;sessionStorage.setItem('uname', val);sessionStorage.setItem('pwd', val);});get.addEventListener('click', function() {// 當我們點擊了之后，就可以把表單里面的值獲取過來console.log(sessionStorage.getItem('uname'));});remove.addEventListener('click', function() {// sessionStorage.removeItem('uname');});del.addEventListener('click', function() {// 當我們點擊了之后，清除所有的sessionStorage.clear();});</script> </body>

window.localStorage

?記住用戶名

如果勾選記住用戶名，下次用戶打開瀏覽器，就在文本框里面自動顯示上次登錄的用戶名

<body><input type="text" id="username"> <input type="checkbox" name="" id="remember"> 記住用戶名<script>var username = document.querySelector('#username');var remember = document.querySelector('#remember');if (localStorage.getItem('username')) {username.value = localStorage.getItem('username');remember.checked = true;}remember.addEventListener('change', function() {if (this.checked) {localStorage.setItem('username', username.value)} else {localStorage.removeItem('username');}})</script> </body>

總結

以上是生活随笔為你收集整理的PC端和移动端网页特效，fastclick插件，Swiper插件，Bootstrap等框架，本地存储的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： PG SQL截取字符串到指定字符位置
下一篇： Win10安装SQL2012或SQL20