HTML5大顯神通：8個(gè)3D視覺效果“讓你好看”

在的網(wǎng)頁(yè)中應(yīng)用了越來(lái)越多的3D應(yīng)用，特別是基于HTML5 Canvas的動(dòng)畫特效，讓用戶有一種非常震撼的視覺體驗(yàn)。本文收集了8個(gè)非常炫酷的3D視覺效果的HTML5動(dòng)畫，都有源代碼分享，你可以學(xué)習(xí)你感興趣的HTML5動(dòng)畫，一起來(lái)看看。

1、CSS3飄帶狀3D菜單

菜單帶小圖標(biāo)這次我們要來(lái)分享一款很特別的CSS3菜單，菜單的外觀是飄帶狀的，并且每一個(gè)菜單項(xiàng)有一個(gè)精美的小圖標(biāo)，鼠標(biāo)滑過(guò)菜單項(xiàng)時(shí)，菜單項(xiàng)就會(huì)向上凸起，像是飄帶飄動(dòng)一樣，形成非常酷的3D視覺效果。這款CSS3飄帶狀3D菜單非常適合作一些活動(dòng)頁(yè)面的菜單導(dǎo)航。

2、HTML5/CSS3 3D紙片折疊動(dòng)畫

今天我們?cè)賮?lái)分享一款非常華麗的HTML5/CSS3 3D動(dòng)畫特效，盡管它目前很少能在項(xiàng)目中應(yīng)用，但從源碼中我們可以學(xué)到很多HTML5 3D動(dòng)畫的制作知識(shí)。這是一款紙片折疊動(dòng)畫特效，利用HTML5和CSS3的相關(guān)特性，我們可以將一張張紙片折疊起來(lái)，形成很酷的3D動(dòng)畫效果。

3、HTML5 webkit 3D立方體圖片旋轉(zhuǎn)滑塊應(yīng)用

今天再來(lái)分享一款HTML5 3D立方體動(dòng)畫，這個(gè)只是一個(gè)3D效果模型，你可以用圖片替換演示中的立方體4個(gè)面，這樣就可以將這款HTML5立方體旋轉(zhuǎn)動(dòng)畫改造成HTML5 3D焦點(diǎn)圖了，由于是基于webkit的，所以有瀏覽器限制，Google Chrome最佳。

4、HTML5顏色漸變3D文字特效

之前我們已經(jīng)分享過(guò)不少HTML5文字特效，效果都還不錯(cuò)，尤其是這款HTML5擺動(dòng)的文字特效類似柳枝擺動(dòng)，更是有非常酷的文字動(dòng)畫效果。今天我們要分享一款HTML5 3D文字特效，文字的顏色是漸變的，同時(shí)有文字陰影，更加凸顯了3D立體的效果。

5、HTML5 3D圖片陰影翻轉(zhuǎn)動(dòng)畫

今天我們要分享一款很酷的HTML5 3D動(dòng)畫特效，這款3D特效可以為你的圖片增加陰影的效果，而且可以讓圖片在鼠標(biāo)滑過(guò)的時(shí)候出現(xiàn)3D翻轉(zhuǎn)的動(dòng)畫效果。這和之前分享的HTML5 3D動(dòng)畫HTML5 3D正方體旋轉(zhuǎn)動(dòng)畫有著類似的效果，大家也可以看看。

6、純CSS3 3D按鈕按鈕酷似牛奶般剔透

CSS3按鈕一般都可以設(shè)計(jì)的非常漂亮，利用投影、漸變等CSS3屬性特效可以把按鈕渲染的十分動(dòng)感。今天分享的這款CSS3按鈕外觀非常特別，它看上去酷似晶瑩剔透的牛奶，而且在點(diǎn)擊按鈕時(shí)出現(xiàn)3D效果的動(dòng)畫，按鈕按下時(shí)，按鈕會(huì)輕輕的彈動(dòng)一下，非常逼真。

7、CSS3 3D發(fā)光切換按鈕

剛剛我們發(fā)布過(guò)一款CSS3開關(guān)切換滑動(dòng)按鈕，應(yīng)該說(shuō)出了有點(diǎn)3D立體的效果外，其他都很普通。現(xiàn)在我們要來(lái)分享一款更酷的CSS3開關(guān)切換按鈕，它不僅具有3D的效果，而且可以發(fā)光，當(dāng)開關(guān)處于打開狀態(tài)時(shí)，旁邊的小燈就會(huì)亮起來(lái)，然后燈光投射到開關(guān)上，效果挺逼真的。

8、CSS3 3D彈性按鈕

今天要分享的這款CSS3按鈕和這款按鈕差不錯(cuò)，也同樣擁有3D的效果，按鈕在按下時(shí)帶有彈性質(zhì)感。

微信搜索“IT之家”關(guān)注搶6s大禮！下載IT之家客戶端（戳這里）也可參與評(píng)論抽樓層大獎(jiǎng)！

家好,我是yangyang.最近在弄h5網(wǎng)頁(yè)(因?yàn)槭嵌_,并沒有使用uniapp、mintui、mui等移動(dòng)端框架),做列表的時(shí)候需要實(shí)現(xiàn)上拉加載，下拉刷新.因此也查詢總結(jié)了部分經(jīng)驗(yàn)來(lái)分享給大家

介紹

下拉刷新和上拉加載這兩種交互方式通常出現(xiàn)在移動(dòng)端中,其本質(zhì)是PC網(wǎng)頁(yè)中的分頁(yè)類似，只是交互形式不同,開源社區(qū)有很多優(yōu)秀的解決方案:better-scroll、iscroll、pulltorefresh.js...

原理

上拉加載

來(lái)源:https://vue3js.cn/interview/JavaScript/pull_up_loading_pull_down_refresh.html

上拉加載的本質(zhì)是頁(yè)面觸底，或者快要觸底時(shí)的動(dòng)作

判斷頁(yè)面觸底我們需要先了解一下下面幾個(gè)屬性

scrollTop：滾動(dòng)視窗的高度距離window頂部的距離，它會(huì)隨著往上滾動(dòng)而不斷增加，初始值是0，它是一個(gè)變化的值
clientHeight:它是一個(gè)定值，表示屏幕可視區(qū)域的高度；
scrollHeight：頁(yè)面不能滾動(dòng)時(shí)也是存在的,此時(shí)scrollHeight等于clientHeight。scrollHeight表示body所有元素的總長(zhǎng)度(包括body元素自身的padding)

綜上我們得出一個(gè)觸底公式：scrollTop + clientHeight >= scrollHeight

例子:

let clientHeight  = document.documentElement.clientHeight; //瀏覽器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;
 
let distance = 50;  //距離視窗還用50的時(shí)候，開始觸發(fā)；

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("開始加載數(shù)據(jù)");
}

下拉刷新

下拉刷新的本質(zhì)是頁(yè)面本身置于頂部時(shí)，用戶下拉時(shí)需要觸發(fā)的動(dòng)作

關(guān)于下拉刷新的原生實(shí)現(xiàn)，主要分成三步：

監(jiān)聽原生touchstart事件，記錄其初始位置的值，e.touches[0].pageY；
監(jiān)聽原生touchmove事件，記錄并計(jì)算當(dāng)前滑動(dòng)的位置值與初始位置值的差值，大于0表示向下拉動(dòng)，并借助CSS3的translateY屬性使元素跟隨手勢(shì)向下滑動(dòng)對(duì)應(yīng)的差值，同時(shí)也應(yīng)設(shè)置一個(gè)允許滑動(dòng)的最大值；
監(jiān)聽原生touchend事件，若此時(shí)元素滑動(dòng)達(dá)到最大值，則觸發(fā)callback，同時(shí)將translateY重設(shè)為0，元素回到初始位置

例子：

Html結(jié)構(gòu)如下

<main>
    <p class="refreshText"></p >
    <ul id="refreshContainer">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        ...
    </ul>
</main>

監(jiān)聽touchstart事件，記錄初始的值

var _element = document.getElementById('refreshContainer'),
    _refreshText = document.querySelector('.refreshText'),
    _startPos = 0,  // 初始的值
    _transitionHeight = 0; // 移動(dòng)的距離

_element.addEventListener('touchstart', function(e) {
    _startPos = e.touches[0].pageY; // 記錄初始位置
    _element.style.position = 'relative';
    _element.style.transition = 'transform 0s';
}, false);

監(jiān)聽touchmove移動(dòng)事件，記錄滑動(dòng)差值

_element.addEventListener('touchmove', function(e) {
    // e.touches[0].pageY 當(dāng)前位置
    _transitionHeight = e.touches[0].pageY - _startPos; // 記錄差值

    if (_transitionHeight > 0 && _transitionHeight < 60) { 
        _refreshText.innerText = '下拉刷新'; 
        _element.style.transform = 'translateY('+_transitionHeight+'px)';

        if (_transitionHeight > 55) {
            _refreshText.innerText = '釋放更新';
        }
    }                
}, false);

最后，就是監(jiān)聽touchend離開的事件

_element.addEventListener('touchend', function(e) {
    _element.style.transition = 'transform 0.5s ease 1s';
    _element.style.transform = 'translateY(0px)';
    _refreshText.innerText = '更新中...';
    // todo...

}, false);

從上面可以看到，在下拉到松手的過(guò)程中，經(jīng)歷了三個(gè)階段：

當(dāng)前手勢(shì)滑動(dòng)位置與初始位置差值大于零時(shí)，提示正在進(jìn)行下拉刷新操作
下拉到一定值時(shí)，顯示松手釋放后的操作提示
下拉到達(dá)設(shè)定最大值松手時(shí)，執(zhí)行回調(diào)，提示正在進(jìn)行更新操作

擴(kuò)展一: 使用BetterScroll 2.0完成效果

首先,小編也是使用它完成,BetterScroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件。它的核心是借鑒的 iscroll (opens new window)的實(shí)現(xiàn)，它的 API 設(shè)計(jì)基本兼容 iscroll，在 iscroll 的基礎(chǔ)上又?jǐn)U展了一些 feature 以及做了一些性能優(yōu)化。

BetterScroll 是使用純 JavaScript 實(shí)現(xiàn)的，這意味著它是無(wú)依賴的,同時(shí)betterScroll采用插件結(jié)構(gòu)設(shè)計(jì),為此官方也擴(kuò)展了很多的應(yīng)用插件,今天我們討論的兩個(gè)效果也對(duì)應(yīng)著它兩個(gè)插件

pulldown:

https://better-scroll.github.io/docs/zh-CN/plugins/pulldown.html

pullup:

https://better-scroll.github.io/docs/zh-CN/plugins/pullup.html

擴(kuò)展二:IntersectionObserver （交叉觀察器）實(shí)現(xiàn)觸底加載更多

小編在探索的過(guò)程中發(fā)現(xiàn)了一個(gè)intersectionObserver web api, 觸發(fā)了我的知識(shí)盲區(qū),這里也簡(jiǎn)單安利下大家,后期會(huì)單獨(dú)出一篇,還有就是,如果大家想看動(dòng)畫效果的,可以到b站搜索這個(gè)api的名稱能找到許多大神的視頻動(dòng)畫原理介紹

IntersectionObserver 接口（從屬于 Intersection Observer API）提供了一種異步觀察目標(biāo)元素與其祖先元素或頂級(jí)文檔視口（viewport）交叉狀態(tài)的方法。其祖先元素或視口被稱為根（root）。

當(dāng)一個(gè) IntersectionObserver 對(duì)象被創(chuàng)建時(shí)，其被配置為監(jiān)聽根中一段給定比例的可見區(qū)域。一旦 IntersectionObserver 被創(chuàng)建，則無(wú)法更改其配置，所以一個(gè)給定的觀察者對(duì)象只能用來(lái)監(jiān)聽可見區(qū)域的特定變化值；然而，你可以在同一個(gè)觀察者對(duì)象中配置監(jiān)聽多個(gè)目標(biāo)元素。

瀏覽器兼容性

觸底加載更多

一個(gè)最簡(jiǎn)單的例子:

const intersectionObserver = new IntersectionObserver((entries) => {
  // 如果 intersectionRatio 為 0，則目標(biāo)在視野外，
  // 我們不需要做任何事情。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// 開始監(jiān)聽
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

參考網(wǎng)站

https://vue3js.cn/interview/JavaScript/pull_up_loading_pull_down_refresh.html#%E4%B8%80%E3%80%81%E5%89%8D%E8%A8%80
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
https://ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
https://zhuanlan.zhihu.com/p/642926109
https://zhuanlan.zhihu.com/p/635191412

義骨架，寫html和css

html部分

<template>
    <div class="drag-wrapper" ref="dragDiv">
        <div class="drag_bg"></div>
        <div class="drag_text f14">{{ confirmWords }}</div>
        <!-- 移動(dòng)的模塊 -->
        <div ref="moveDiv"
             @mousedown="mousedownFn($event)"
             :class="{'handler_ok_bg': confirmSuccess}"
             class="handler handler_bg"></div>
    </div>
</template>

css部分: 由于擔(dān)心圖片源的問題，所以寫成了base64的圖片

<style scoped>
    .drag{
        position: relative;
        background-color: #e8e8e8;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .handler{
        width: 40px;
        height: 40px;
        border: 1px solid #ccc;
        cursor: move;
        position: absolute;top: 0px;left: 0px;
    }
    .handler_bg{
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
    }
    .handler_ok_bg{
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
    }
    .drag_bg{
        background-color: #7ac23c;
        height: 40px;
        width: 0px;
    }
    .drag_text{
        position: absolute;
        top: 0px;
        width: 100%;text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select:none;
        -ms-user-select:none;
    }
</style>

實(shí)現(xiàn)滑動(dòng)拖拽校驗(yàn)

定義參數(shù)

data() {
    return {
        beginClientX:0,               // 距離屏幕左端距離
        mouseMoveStata:false,         // 觸發(fā)拖動(dòng)狀態(tài)  判斷
        maxwidth:'',                  // 拖動(dòng)最大寬度，依據(jù)滑塊寬度算出來(lái)的
        confirmWords:'拖動(dòng)滑塊驗(yàn)證',   // 滑塊文字
        confirmSuccess:false          // 驗(yàn)證成功判斷
    }
}

1. 在mounted里面，根據(jù)滑塊寬度計(jì)算可拖動(dòng)最大寬度以及監(jiān)聽手指的觸摸和離開事件

mounted() {
    // 根據(jù)滑塊寬度計(jì)算可拖動(dòng)最大寬度
    this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
    // 監(jiān)聽手指的觸摸事件
    document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)
    // 監(jiān)聽手指離開事件
    document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
}

2. 編寫手指滑動(dòng)的事件和手指離開的事件

mousemove事件

首先判斷是否觸發(fā)拖動(dòng)狀態(tài),然后計(jì)算拖動(dòng)的距離和模塊距離，實(shí)時(shí)賦值

//驗(yàn)證成功函數(shù)
mouseMoveFn(e){
    if(this.mouseMoveStata){
        let width = e.clientX - this.beginClientX
        if(width > 0 && width <= this.maxwidth) {
            document.getElementsByClassName('handler')[0].style.left = width + 'px'
            document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'
        }else if(width > this.maxwidth) this.successFunction()
    }
},

mouseup事件

把拖動(dòng)狀態(tài)改成false，并且把滑塊移到對(duì)應(yīng)的手指落下位置上

moseUpFn(e) {
    this.mouseMoveState = !1                        // 修改狀態(tài)
    const width = e.clientX - this.beginClientX     // 計(jì)算獲取寬度
    if(width < this.maxwidth) {                     // 當(dāng)寬度小于模塊的寬度時(shí)，賦值
        document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
    }
}

在上面html部分的handler塊里，定義了mousedown事件(mousedownFn($event))
需要阻止文件選中等瀏覽器默認(rèn)行為，并把觸發(fā)拖動(dòng)狀態(tài)這個(gè)閾值打開，記錄手指移動(dòng)的距離

mousedownFn:function (e) {
    e.preventDefault && e.preventDefault()   // 阻止文字選中等 瀏覽器默認(rèn)事件
    this.mouseMoveStata = true               // 把觸發(fā)拖動(dòng)狀態(tài)這個(gè)閾值打開
    this.beginClientX = e.clientX            // 記錄手指移動(dòng)的距離
},

至此，功能就完成了。。

完整的JS代碼如下

<script>
    export default {
        data(){
            return {
                beginClientX:0,           /*距離屏幕左端距離*/
                mouseMoveStata:false,     /*觸發(fā)拖動(dòng)狀態(tài)  判斷*/
                maxwidth:'',               /*拖動(dòng)最大寬度，依據(jù)滑塊寬度算出來(lái)的*/
                confirmWords:'拖動(dòng)滑塊驗(yàn)證',   /*滑塊文字*/
                confirmSuccess:false           /*驗(yàn)證成功判斷*/
            }
        },
        mounted(){
            this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
            document.getElementsByTagName('html')[0].addEventListener('mousemove',this.mouseMoveFn)
            document.getElementsByTagName('html')[0].addEventListener('mouseup',this.moseUpFn)
        },
        methods: {
            mousedownFn:function (e) {
                if(!this.confirmSuccess){
                    e.preventDefault && e.preventDefault()   //阻止文字選中等 瀏覽器默認(rèn)事件
                    this.mouseMoveStata = true
                    this.beginClientX = e.clientX
                }
            },
            //mousedoen 事件
            successFunction(){
                this.confirmSuccess = true
                this.confirmWords = '驗(yàn)證通過(guò)'
                this.$emit('onValidation', true)
                if(window.addEventListener){
                    document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn)
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn)
                }else document.getElementsByTagName('html')[0].removeEventListener('mouseup',()=>{})
                document.getElementsByClassName('drag_text')[0].style.color = '#fff'
                document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px'
                document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px'
            },
            //驗(yàn)證成功函數(shù)
            mouseMoveFn(e){
                if(this.mouseMoveStata){
                    let width = e.clientX - this.beginClientX
                    if(width > 0 && width <= this.maxwidth) {
                        document.getElementsByClassName('handler')[0].style.left = width + 'px'
                        document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'
                    }else if(width > this.maxwidth) this.successFunction()
                }
            },
            //mousemove事件
            moseUpFn(e){
                this.mouseMoveStata = false
                var width = e.clientX - this.beginClientX
                if(width<this.maxwidth){
                    document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
                    document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
                }
            }
        }
    }
</script>

最后最后：

公眾號(hào)：小何成長(zhǎng)，佛系更文，都是自己曾經(jīng)踩過(guò)的坑或者是學(xué)到的東西
有興趣的小伙伴歡迎關(guān)注我哦，我是：何小玍。大家一起進(jìn)步鴨

在線咨詢

上一篇：品牌內(nèi)衣內(nèi)褲線上商城網(wǎng)站制作與設(shè)計(jì)案例分享,模板建站全攻略
下一篇：HTML 之簡(jiǎn)介

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商