文章目錄

移動端網頁特效
- 觸屏事件
- classList屬性
- 常用開發插件
PC端網頁特效
- 偏移量系列 offset
- 可視區系列 client
- 滾動系列 scroll
- 影片原理

移動端網頁特效

觸屏事件

移動端瀏覽器兼容性較好，不需要考慮以前 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屬性

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 檔案，它遵循一定規范撰寫，方便程式展示效果，擁有特定功能且方便呼叫，如輪播圖和瀑布流插件

插件的使用：

引入 js 插件檔案
按照規定語法使用

特點： 它一般是為了解決某個問題而專門存在，其功能單一，并且比較小，比如移動端常見插件：iScroll、Swiper、SuperSlider

PC端網頁特效

偏移量系列 offset

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 系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等，

常用屬性：
在這里插入圖片描述
client和offset最大的區別就是：不包含邊框
圖示：

滾動系列 scroll

scroll 翻譯過來就是滾動的，使用 scroll 系列的相關屬性可以動態的得到該元素的大小、滾動距離等，

常用屬性：
在這里插入圖片描述
圖示：

滾動條：

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

案例——固定右側側邊欄：

原先側邊欄是絕對定位
當頁面滾動到一定位置，側邊欄改為固定定位
頁面繼續滾動，會讓回傳頂部顯示出來

效果展示：
在這里插入圖片描述

實作代碼：

<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() 不斷移動盒子位置

實作步驟：

獲得盒子當前位置
讓盒子在當前位置加上1個移動距離
利用定時器不斷重復這個操作
加一個結束定時器的條件
注意此元素需要添加定位，才能使用 element.style.left

簡單影片函式封裝：

// 簡單影片函式封裝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);
}

緩動效果原理：

緩動影片就是讓元素運動速度有所變化，最常見的是讓速度慢慢停下來

讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來，
核心演算法： (目標值 - 現在的位置 ) / 10 做為每次移動的距離步長
停止的條件是：讓當前盒子位置等于目標位置就停止定時器
注意步長值需要取整

// 緩動影片函式封裝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);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/308800.html

標籤：其他

上一篇：vue的ElemenUI的使用

下一篇：JavaScript基礎--超詳細（運算子）

移動端、PC端 網頁特效

文章目錄

移動端網頁特效

觸屏事件

classList屬性

常用開發插件

PC端網頁特效

偏移量系列 offset

可視區系列 client

滾動系列 scroll

影片原理

移動端、PC端網頁特效