在婚戀app原始碼開發中，為了提高使用者的使用體驗往往會增加一些互動性的網頁特效，用於對使用者的操作進行反饋，不過這種特效在移動端的網頁上是如何實現的呢？

婚戀app原始碼移動端網頁特效

觸屏事件

移動端瀏覽器相容性較好，不需要考慮以前 JS 的相容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch（也稱觸控事件），Android 和 IOS 都有。

touch 物件代表一個觸控點。觸控點可能是一根手指，也可能是一根觸控筆。觸屏事件可響應使用者手指（或觸控筆）對螢幕或者觸控板操作。

婚戀app原始碼常見的觸屏事件：

觸控事件物件（TouchEvent）

TouchEvent 是一類描述手指在觸控平面（觸控式螢幕、觸控板等）的狀態變化的事件。這類事件用於描述一個或多個觸點，使觸控事件物件（TouchEvent）開發者可以檢測觸點的移動，觸點的增加和減少，等等

touchstart、touchmove、touchend 三個事件都會各自有事件物件。

觸控事件物件常見物件列表：
在這裡插入圖片描述
因為平時都是給元素註冊觸控事件，所以重點記住 targetTocuhes

婚戀app原始碼移動端拖動元素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>

常用開發外掛

婚戀app原始碼移動端要求的是快速開發，所以經常會藉助於一些外掛來幫完成操作

JS 外掛是 js 檔案，它遵循一定規範編寫，方便程式展示效果，擁有特定功能且方便呼叫。如婚戀app原始碼中的輪播圖和瀑布流外掛

外掛的使用：

1、引入 js 外掛檔案
2、按照規定語法使用

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

以上便是“婚戀app原始碼移動端網頁特效的實現方式”的全部內容，希望對大家有幫助。
本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：https://blog.csdn.net/weixin_45654582/article/details/120518358

如何實現婚戀app原始碼移動端網頁特效？

婚戀app原始碼移動端網頁特效

相關文章