2. 程式人生 > >從零開始學 Web 之 移動Web（三）Zepto

從零開始學 Web 之 移動Web（三）Zepto

阿新 • • 發佈：2019-01-15

一、Zepto簡介

Zepto是一個輕量級的針對現代高階瀏覽器的 JavaScript庫， 它與jquery有著類似的api。

Zepto 主要使用在移動端瀏覽器上面，由於移動端的瀏覽器都是比較新的平臺，而 jQuery 主要是在 PC 上為了瀏覽器的相容性而使用的，所以在移動端一般不使用 jQuery，因為它的相容性失去了意義。

Zepto 就是移動端代替 jQuery 的 js 庫，它封裝了很多關於手勢操作的方法。如果你會用jquery，那麼你也會用zepto。

二、手勢事件封裝

Zepto 將移動端的 touchStart，touchmove 和 touchEnd 封裝成了一系列事件。

tap ：觸控式螢幕幕時觸發。

singleTap ：單擊螢幕時觸發

doubleTap：雙擊螢幕時觸發。(如果你不需要檢測單擊、雙擊，使用 tap 代替)。

longTap ：長按時觸發。當一個元素被按住超過750ms觸發。

swipe：滑動螢幕時觸發。

swipeLeft, swipeRight, swipeUp, swipeDown：螢幕左滑，右滑，上滑，下滑時觸發。

三、Zepto 模組化

Zepto 有一點和 jQuery 是不同的，就是 Zepto 是分模組的。在使用的時候不是像 jQuery 只需要引入一個 js 檔案就可以了。Zepto 是分模組的。

預設的 Zepto.js 檔案只包含下面一些功能：

zepto ✔ 核心模組；包含許多方法
event ✔ 通過on()& off()處理事件
ajax ✔ XMLHttpRequest 和 JSONP 實用功能
form ✔ 序列化 & 提交web表單
ie ✔ 增加支援桌面的Internet Explorer 10+和Windows Phone 8。

如果要使用到其他的功能，就需要包含其他的 js 檔案：

detect.js 提供 $.os和 $.browser訊息
fx.js The animate()方法
fx_methods.js 以動畫形式的 show, hide, toggle
, 和 fade*()方法.
assets.js 實驗性支援從DOM中移除image元素後清理iOS的記憶體。
data.js 一個全面的 data()方法, 能夠在記憶體中儲存任意物件。
deferred.js 提供 $.Deferredpromises API. 依賴"callbacks" 模組. 當包含這個模組時候, $.ajax() 支援promise介面鏈式的回撥。
callbacks.js 為"deferred"模組提供 $.Callbacks。
selector.js 實驗性的支援 jQuery CSS 表示式 實用功能，比如 $('div:first')和el.is(':visible')。
touch.js 在觸控裝置上觸發tap– 和 swipe– 相關事件。這適用於所有的touch(iOS, Android)和pointer事件(Windows Phone)。
gesture.js 在觸控裝置上觸發 pinch 手勢事件。
stack.js 提供 andSelf& end()鏈式呼叫方法
ios3.js String.prototype.trim 和 Array.prototype.reduce 方法 (如果他們不存在) ，以相容 iOS 3.x.

所以，每次在使用到某一個功能的時候，就需要到 html 檔案下新增相應的 js 庫檔案，這樣就比較繁瑣，更重要的是多個 js 檔案會增加訪問伺服器的次數，那麼我們可不可以像 jQuery 一樣，只包含一個 js 庫檔案就包括所有的功能呢？

答案是肯定的。

四、Zepto 的定製

Zepto 允許將多個 js 檔案打包成一個 js 檔案。

操作步驟：

1、安裝 Nodejs 環境

2、下載 zepto.js 原始碼並解壓好。

4、cmd 命令列進入解壓縮後的目錄

5、執行npm install 命令（這一步需要聯網下載）

6、編輯 zepto.js 原始碼中的 make檔案，新增自定義模組並儲存，如下

原來的：modules = (env['MODULES'] || 'zepto event ajax form ie').split(' ')

增加自己需要的模組：modules = (env['MODULES'] || 'zepto event ajax form ie fx selector touch').split(' ')

7、然後執行命令 npm run-script dist（這一步會在當前目錄生成一個dist資料夾）
8、檢視目錄 dist ，裡面就有我們打包好的 zepto.js 庫檔案。

五、使用 zepto 實現京東移動首頁

以下為詳細程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- <script src="./js/index.js"></script> -->
    <script src="./zepto-master/src/zepto.min.js"></script>
    <script src="./zepto-master/src/fx.js"></script>
    <script src="./zepto-master/src/selector.js"></script>
    <script src="./zepto-master/src/touch.js"></script>
    <script src="./js/index-zepto.js"></script>
</head>

<body>
    <div class="jd">
        <!-- 搜尋欄開始 -->
        <div class="search">
            <a href="javascript:;" class="search-logo"></a>
            <form action="" class="search-text">
                <input type="text" placeholder="請輸入商品名稱">
            </form>
            <a href="javascript:;" class="search-login">登入</a>
        </div>
        <!-- 搜尋欄結束 -->

        <!-- 輪播圖開始 -->
        <div class="slideshow">
            <ul class="slideshow-img clearfix">
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l5.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l6.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l7.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l8.jpg" alt="">
                    </a>
                </li>
            </ul>
            <ul class="slideshow-dot">
                <li class="select"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 輪播圖結束 -->

        <!-- 導航欄開始 -->
        <div class="nav">
            <ul class="nav-ul clearfix">
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav0.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav1.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav2.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav3.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav4.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav5.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav6.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav7.png">
                    </a>
                    <p>商品分類</p>
                </li>
            </ul>
        </div>
        <!-- 導航欄結束 -->

        <!-- 主體內容開始 -->
        <div class="content">
            <div class="content-box clearfix content-box-sk">
                <div class="content-title">
                    <span class="content-title-left-clock"></span>
                    <span class="content-title-left-text fl">掌上秒殺</span>
                    <div class="content-title-left-time fl">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                    <span class="content-title-right fr">更多秒殺...</span>
                </div>
                <lu class="content-ul clearfix">
                    <li>
                        <a href="javascript:;">
                            <img src="./uploads/detail01.jpg" alt="" class="br">
                        </a>
                        <p>￥10.00</p>
                        <p class="content-ul-delete">￥20.00</p>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./uploads/detail01.jpg" alt="" class="br">
                        </a>
                        <p>￥10.00</p>
                        <p class="content-ul-delete">￥20.00</p>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./uploads/detail01.jpg" alt="">
                        </a>
                        <p>￥10.00</p>
                        <p class="content-ul-delete">￥20.00</p>
                    </li>
                </lu>
            </div>
            <div class="content-box clearfix">
                <div class="content-title">
                    <h3>京東超市</h3>
                </div>
                <lu class="content-ul">
                    <li class="fl">
                        <a href="javascript:;">
                            <img src="./uploads/cp1.jpg" alt="">
                        </a>
                    </li>
                    <li class="fl bl bb">
                        <a href="javascript:;">
                            <img src="./uploads/cp2.jpg" alt="">
                        </a>
                    </li>
                    <li class="fl bl">
                        <a href="javascript:;">
                            <img src="./uploads/cp3.jpg" alt="">
                        </a>
                    </li>
                </lu>
            </div>
            <div class="content-box clearfix">
                <div class="content-title">
                    <h3>京東超市</h3>
                </div>
                <lu class="content-ul">
                    <li class="fr">
                        <a href="javascript:;">
                            <img src="./uploads/cp4.jpg" alt="">
                        </a>
                    </li>
                    <li class="fl bl bb">
                        <a href="javascript:;">
                            <img src="./uploads/cp5.jpg" alt="">
                        </a>
                    </li>
                    <li class="fl bl">
                        <a href="javascript:;">
                            <img src="./uploads/cp6.jpg" alt="">
                        </a>
                    </li>
                </lu>
            </div>
        </div>
        <!-- 主體內容結束 -->
    </div>
</body>

</html>

js 檔案：

$(function () {  
    // 1.在開始和最後位置新增圖片
    // 2.重新設定圖片盒子的寬度和圖片的寬度
    // 3.新增定時器，自動輪播
    // 4.新增過渡結束事件
    // 5.設定小白點
    // 6.新增手動輪播

    // 獲取元素
    var ulObj = $(".slideshow-img");
    var first = ulObj.find("li:first-of-type");
    var last = ulObj.find("li:last-of-type");

    var bannerWidth = $(".slideshow").width();

    // 在開始和最後位置新增圖片
    ulObj.append(first.clone());
    last.clone().insertBefore(first);

    // 重新設定圖片盒子的寬度和圖片的寬度
    var liObjs = ulObj.find("li");

    ulObj.width(liObjs.length +"00%");
    liObjs.each(function (index) {  
        // 陣列是DOM操作，要轉換成zepto元素
        $(liObjs[index]).width(bannerWidth);
    });    

    // 設定預設顯示第一張圖
    ulObj.css("transform", "translateX("+ -bannerWidth +"px)");

    var index = 1;

    // 盒子改變大小的時候重現設定圖片盒子的寬度和圖片的寬度
    $(window).on("resize", function () {  
        ulObj.width(liObjs.length +"00%");
        liObjs.each(function (index) {  
            // 陣列是DOM操作，要轉換成zepto元素
            $(liObjs[index]).width($(".slideshow").width());            
        });
        ulObj.css("transform", "translateX("+ -$(".slideshow").width()*index +"px)");
    });

    // 輪播動畫函式
    var setAnimate = function () {  
        ulObj.animate(
            {"transform": "translateX("+ -$(".slideshow").width()*index +"px)"},
            500,
            "linear",
            function () {  // 過渡結束事件回撥函式
                if(index == 0) {
                    index = liObjs.length -2;
                    ulObj.css("transform", "translateX("+ -$(".slideshow").width()*index +"px)");
                } else if(index == liObjs.length -1) {
                    index = 1;
                    ulObj.css("transform", "translateX("+ -$(".slideshow").width()*index +"px)");
                }
                // 設定小白點
                $(".slideshow-dot").children("li").removeClass("select").eq(index-1).addClass("select");          
    
            }
        );
    };

    var timerId;
    // 新增定時器，自動輪播
    var timerStart = function () {  
        timerId = setInterval(function () {  
            index++;
            setAnimate();
        }, 1500);
    };
    timerStart();

    // 手動輪播操作
    ulObj.on("swipeLeft", function () {
        clearInterval(timerId);
        index++;
        setAnimate();
        //手動輪播操作完成後再開啟定時器
        timerStart();
    });
    ulObj.on("swipeRight", function () {
        clearInterval(timerId);
        index--;
        setAnimate();
        // 手動輪播操作完成後再開啟定時器
        timerStart();
    });

    //------------------------------------------------

    // 搜尋欄上下滾動時改變透明度
    var bannerEffect = function () {  
        var bannerObj = $(".search");
        var slideshowObj = $(".slideshow");
        var bannerHeight = bannerObj.height();
        var imgHeight = slideshowObj.height();
        // console.log(bannerHeight + '  ' + imgHeight);

        $(window).on("scroll", function (e) {  
            var scrollHeight = $(window).scrollTop();            
            if(scrollHeight < (imgHeight-bannerHeight)) {
                var setopacity = scrollHeight / (imgHeight-bannerHeight);
                bannerObj.css("backgroundColor", "rgba(233, 35, 34,"+setopacity+")");
            }
            
        });
        
    };
    bannerEffect();

    //-----------------------------------------------------

    // 設定倒計時
    var timerCount = function () {  
        var timers = $(".content-title-left-time").children("span");
        var titleCount = 2*60*60;

        var timerId = setInterval(function () {  
            titleCount--;
            var hour = Math.floor(titleCount / 3600);
            var minute = Math.floor((titleCount % 3600) / 60);
            var second = titleCount % 60;

            if(titleCount >= 0) {
                $(timers[0]).html(Math.floor(hour / 10));
                $(timers[1]).html(hour % 10);
                $(timers[3]).html(Math.floor(minute / 10));
                $(timers[4]).html(minute % 10);
                $(timers[6]).html(Math.floor(second / 10));
                $(timers[7]).html(second % 10);
            } else {
                titleCount = 0;
                clearInterval(timerId);
                return;
            }

        }, 1000);
    };
    timerCount();

});

相關推薦

webpack從零開始構建專案之rem問題（三）

使用webpack解決px轉rem的自適應問題 現在的專案配置已經可以正常執行 接下來我們要考慮下一個問題，由於VUE主要適用於移動端，所以我們需要一個自適應方案 由於這是一個大眾需求的剛需方案，所以我們大可不必自己手動去寫JS程式碼，重複造輪子 那麼我

《從零開始學Swift》學習筆記（Day67）——Cocoa Touch設計模式及應用之MVC模式

table control sdn rate term targe rac uitabbar bsp 原創文章，歡迎轉載。轉載請註明：關東升的博客 MVC（Model-View-Controller，模型-視圖-控制器）模式是相當古老的設計模式之中的一個，它最早出如今

【SpringMvc】從零開始學SpringMvc之實現使用者登入(三)

大家好，在前2篇中，我們實現了SpringMvc的配置和資料庫連線，這一篇我們來用html/ajax實現一個簡單的登入功能。 【SpringMvc】從零開始學SpringMvc之初始化(一) 【SpringMvc】從零開始學SpringMvc之資料庫(二) 準

《從零開始學Swift》學習筆記（Day60）——Core Foundation框架

類型轉換 字符 sso grid blog spa www water 轉載 創文章，歡迎轉載。轉載請註明：關東升的博客 Core Foundation框架是蘋果公司提供一套概念來源於Foundation框架，編程接口面向C語言風格的API。盡管在Swift中調用這樣

從零開始學Kotlin-使用接口（7）

如何 mark android interface inter rand 兩個 blog dtw 從零開始學Kotlin基礎篇系列文章 定義接口 使用關鍵字interface定義接口 interface InterfaceDemo7 { } 類或對象可以實現一個或者多個接

【高德地圖API】從零開始學高德JS API（七）——定位方式大揭祕

摘要：關於定位，分為GPS定位和網路定位2種。GPS定位，精度較高，可達到10米，但室內不可用，且超級費電。網路定位，分為wifi定位和基站定位，都是通過獲取wifi或者基站資訊，然後查詢對應的wifi或者基站位置資料庫，得到的定位地點。定位資料庫可以不斷完善不斷補充，所以，

轉載：高德地圖API學習 從零開始學高德JS API（一）地圖展現

摘要：關於地圖的顯示，我想大家最關心的就是麻點圖，自定義底圖的解決方案了吧。在過去，marker大於500之後，瀏覽器開始逐漸卡死，大家都開始尋找解決方案，比如聚合marker啊，比如麻點圖啊。聚合marker裡面還有一些複雜的演算法，而麻點圖，最讓大家頭疼的，就是如何生成麻點圖，如何切圖，如何把圖片貼到地圖

從零開始搭建一個主流專案框架（三）—RxJava2.0+Retrofit2.0+OkHttp

個人部落格：haichenyi.com。感謝關注   上一篇，我們把mvp+dagger加進去了，這一篇，我們把網路請求加上   我這裡的網路請求是用的裝飾者模式去寫的，什麼是裝飾者模式呢？在不必改變原類檔案和使用繼承的情況下，動態地擴充套件一個物件的功能。

從零開始學 Web 之 Vue.js（三）Vue實例的生命周期

報錯 web 前端 cnblogs 前端 eth code vue 公眾 des 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 JS 高階（三）apply與call，bind，閉包和沙箱

一、apply 和 call 方法 apply 和 call 都可以改變呼叫其的函式或方法中的 this 指向。 不同的是傳入引數時，apply 有兩個引數，第二個引數是陣列；call 從第二個引數開始是呼叫其的函式的所有引數。 使用方法： 1、apply的使用語法： 函式名.apply(物件，[引數1

《從零開始學Swift》學習筆記（Day 57）——Swift編碼規範之凝視規範：文件凝視、文檔凝視、代碼凝視、使用地標凝視

精品 -type mil 顯示 clas ber ansi tex text 原創文章。歡迎轉載。轉載請註明：關東升的博客 前面說到Swift凝視的語法有兩種：單行凝視（//）和多行凝視（/*...*/）。這裏來介紹一下他們的使用規範。 1、文件凝視文件凝視就在每個文

【SpringMvc】從零開始學SpringMvc之資料庫(二)

大家好，在上一篇中，我們介紹了SpringMvc 的搭建，這篇我們來看下SpringMvc連線資料庫。 【SpringMvc】從零開始學SpringMvc之初始化(一) 準備 首先， 需要安裝Mysql、Navicat（或者類似軟體）、有一點sql基礎，瞭解一點

【SpringMvc】從零開始學SpringMvc之初始化(一)

大家好，我們今天開始SpringMvc 這個系列，由於筆者也是安卓出身，對SpringMvc 也是接觸不久，所以，這個系列僅僅只是記錄筆者學習SpringMvc 過程中的心得，如有錯誤，歡迎指正。 在開始之前，我們需要準備一些東西，JDK、Eclipse（MyEclipse）、Tom

【SpringMvc】從零開始學SpringMvc之實現使用者管理(四)

大家好，在上一篇中，我們實現了使用者登入，這一篇我們來實現使用者的增刪改查。由於在第2篇中，我們已經建立好了資料庫，這裡就不在詳述了。 準備 這裡，我們用到了騰訊的前端模板引擎art-template，不熟悉的小夥伴可以先了解一番，或者有熟悉其他模板引擎的，也

從零開始學Java之五種內部類將執行緒隱藏類中

1.使用普通內部類繼承Thread類 <code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box;

從零開始學C++之虛擬函式與多型（一）：虛擬函式表指標、虛解構函式、object slicing與虛擬函式、C++物件模型圖

#include <iostream>using namespace std;class CObject {public:     virtual void Serialize()     {         cout << "CObject::Serialize ..." <&

從零開始學Java之單例模式:懶漢模式和飽漢模式

單例模式：單例模式是一種常用的軟體設計模式。在它的核心結構中只包含一個被稱為單例類的特殊類。通過單例模式可以保證系統中一個類只有一個例項而且該例項易於外界訪問，從而方便對例項個數的控制並節約系統資源。

從零開始學C++之IO流類庫（三）：檔案的讀寫、二進位制檔案的讀寫、檔案隨機讀寫

#include <cassert>#include <iostream>#include <fstream>#include <string>using namespace std;struct Test {     int a;     int b; };i

從零開始學Java之出入門衛管理（二）

    這個系統包含了四塊，第一塊就是人員管理，經理分配三位分別有“ABC"許可權的人，分別管理請假申請，請假審批，門衛登記管理。同時不屬於本公司的內部人員，如別的公司的人員如果想到本公司訪問，也是先通過這”ABC“許可權的三個人代為寫來訪申請，來訪審批，來訪門衛登記管理

從零開始學Java之 編寫簡單的工程

筆者本人從最初開始接觸C語言、C++、VC++、彙編到後來接觸PHP以及Java，在這些語言的使用過程中深刻感受到這些語言都是相同的編寫思路，程式碼編寫的方式也是大同小異，目前認為Java語言的亮點是package以及反射機制。 package不僅提供