2021-10-12 前端達人
移動端瀏覽器兼容性較好，不需要考慮以前 JS 的兼容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch（也稱觸摸事件），Android 和 IOS 都有。
touch 對象代表一個觸摸點。觸摸點可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應用戶手指（或觸控筆）對屏幕或者觸控板操作。
常見的觸屏事件：
觸摸事件對象（TouchEvent）
TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件。這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等
touchstart、touchmove、touchend 三個事件都會各自有事件對象。
觸摸事件對象常見對象列表：
因為平時都是給元素注冊觸摸事件，所以重點記住 targetTocuhes
移動端拖動元素JS代碼實現：
// （1） 觸摸元素 touchstart： 獲取手指初始坐標，同時獲得盒子原來的位置 // （2） 移動手指 touchmove： 計算手指的滑動距離，并且移動盒子 // （3） 離開手指 touchend: var div = document.querySelector('div'); var startX = 0; //獲取手指初始坐標 var startY = 0; var x = 0; //獲得盒子原來的位置 var y = 0; div.addEventListener('touchstart', function(e) { // 獲取手指初始坐標 startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); div.addEventListener('touchmove', function(e) { // 計算手指的移動距離： 手指移動之后的坐標減去手指初始的坐標 var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; // 移動我們的盒子 盒子原來的位置 + 手指移動的距離 this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; e.preventDefault(); // 阻止屏幕滾動的默認行為 });
classList屬性是HTML5新增的一個屬性。返回元素的類名，該屬性用在元素中添加、移除及切換CSS類
<style> .bg { background-color: black; } </style> <body> <div class="one two"></div> <button> 開關燈</button> <script> // classList 返回元素的類名 var div = document.querySelector('div'); // console.log(div.classList[1]); // 1. 添加類名 是在后面追加類名不會覆蓋以前的類名 注意前面不需要加. div.classList.add('three'); // 2. 刪除類名 div.classList.remove('one'); // 3. 切換類 var btn = document.querySelector('button'); btn.addEventListener('click', function() { document.body.classList.toggle('bg'); }) </script> </body>
移動端 要求的是快速開發，所以經常會借助于一些插件來幫完成操作
JS 插件是 js 文件，它遵循一定規范編寫，方便程序展示效果，擁有特定功能且方便調用。如輪播圖和瀑布流插件
插件的使用：
特點： 它一般是為了解決某個問題而專門存在，其功能單一，并且比較小。比如移動端常見插件：iScroll、Swiper、SuperSlider
offset 翻譯過來就是偏移量， 使用 offset 系列相關屬性可以 動態 的得到該元素的位置（偏移）、大小等。
常用屬性：
圖示：
offset與style區別：
| offset | style |
|---|---|
| 可以得到任意樣式表中的樣式值 | 只能得到行內樣式表中的樣式值 |
| offset系列獲得的數值是沒有單位的 | style.width 獲得的是帶有單位的字符串 |
| offsetWidth 包含padding+border+width | style.width 獲得不包含padding和border 的值 |
| offsetWidth 等屬性是只讀屬性，只能獲取不能賦值 | style.width 是可讀寫屬性，可以獲取也可以賦值 |
| 獲取元素大小位置，用offset更合適 | 元素更改值，則需要用style改變 |
案例——獲取鼠標在盒子內的坐標：
效果展示：
實現代碼(JS)：
// 在盒子內點擊， 想要得到鼠標距離盒子左右的距離。 // 首先得到鼠標在頁面中的坐標（ 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; })
案例——模態拖拽框：
效果展示：
實現代碼：
<head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a { padding: 0px; margin: 0px; } .login { display: none; width: 512px; height: 280px; position: fixed; border: #ebebeb solid 1px; left: 50%; top: 50%; background: #ffffff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%, -50%); } .login-title { width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move; } .login-input-content { margin-top: 20px; } .login-button { width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: #ebebeb 1px solid; text-align: center; } .login-bg { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, .3); } a { text-decoration: none; color: #000000; } .login-button a { display: block; } .login-input input.list-input { float: left; line-height: 35px; height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px; } .login-input { overflow: hidden; margin: 0px 0px 20px 0px; } .login-input label { float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px; font-size: 14px; } .login-title span { position: absolute; font-size: 12px; right: -20px; top: -30px; background: #ffffff; border: #ebebeb solid 1px; width: 40px; height: 40px; border-radius: 20px; } </style> </head> <body> <div class="login-header"><a id="link" href="javascript:;">點擊，彈出登錄框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登錄會員 <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關閉</a></span> </div> <div class="login-input-content"> <div class="login-input"> <label>用戶名：</label> <input type="text" placeholder="請輸入用戶名" name="info[username]" id="username" class="list-input"> </div> <div class="login-input"> <label>登錄密碼：</label> <input type="password" placeholder="請輸入登錄密碼" name="info[password]" id="password" class="list-input"> </div> </div> <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會員</a></div> </div> <!-- 遮蓋層 --> <div id="bg" class="login-bg"></div> <script> // 1. 獲取元素 var login = document.querySelector('.login'); var mask = document.querySelector('.login-bg'); var link = document.querySelector('#link'); var closeBtn = document.querySelector('#closeBtn'); var title = document.querySelector('#title'); // 2. 點擊彈出層這個鏈接 link 讓mask 和login 顯示出來 link.addEventListener('click', function() { mask.style.display = 'block'; login.style.display = 'block'; }) // 3. 點擊 closeBtn 就隱藏 mask 和 login closeBtn.addEventListener('click', function() { mask.style.display = 'none'; login.style.display = 'none'; }) // 4. 開始拖拽 // (1) 當我們鼠標按下， 就獲得鼠標在盒子內的坐標 title.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // (2) 鼠標移動的時候，把鼠標在頁面中的坐標，減去 鼠標在盒子內的坐標就是模態框的left和top值 document.addEventListener('mousemove', move) function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // (3) 鼠標彈起，就讓鼠標移動事件移除 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }) }) </script> </body>
client 翻譯過來就是客戶端，使用 client 系列的相關屬性來獲取元素可視區的相關信息。通過 client 系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。
常用屬性：
client和offset最大的區別就是 ：不包含邊框
圖示：
scroll 翻譯過來就是滾動的，使用 scroll 系列的相關屬性可以動態的得到該元素的大小、滾動距離等。
常用屬性：
圖示：
滾動條：
案例——固定右側側邊欄：
效果展示：
實現代碼：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style> </head> <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. 頁面滾動事件 scroll document.addEventListener('scroll', function() { // 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'; } }) </script> </body>
三大系列作用區別：
它們主要用法：
| 系列 | 作用 | 屬性 |
|---|---|---|
| offset | 用于獲得元素位置 | offsetLeft offsetTop |
| client | 用于獲取元素大小 | clientWidth clientHeight |
| scroll | 用于獲取滾動距離 | scrollTop scrollLeft |
注意：頁面滾動的距離通過 window.pageXOffset 獲得
核心原理：通過定時器 setInterval() 不斷移動盒子位置
實現步驟：
簡單動畫函數封裝：
// 簡單動畫函數封裝obj目標對象 target 目標位置 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft >= target) { // 停止動畫 本質是停止定時器 clearInterval(timer); } //每次均勻向右移動1px obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); }
緩動效果原理：
緩動動畫就是讓元素運動速度有所變化，最常見的是讓速度慢慢停下來
// 緩動動畫函數封裝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 這個步長值改為一個慢慢變小的值 步長公式：(目標值 - 現在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }
多個目標值之間移動：
當開始移動時候，判斷步長是正值還是負值
動畫函數封裝到單獨JS文件： animate.js
function animate(obj, target, 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(); } // 把每次加1 這個步長值改為一個慢慢變小的值 步長公式：(目標值 - 現在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn