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

時間 2019-11-17

標籤開始 web 移動 zepto 欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的探索之旅吧！css

1、Zepto簡介

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

Zepto 主要使用在移動端瀏覽器上面，因爲移動端的瀏覽器都是比較新的平臺，而 jQuery 主要是在 PC 上爲了瀏覽器的兼容性而使用的，因此在移動端通常不使用 jQuery，由於它的兼容性失去了意義。前端

Zepto 就是移動端代替 jQuery 的 js 庫，它封裝了不少關於手勢操做的方法。若是你會用jquery，那麼你也會用zepto。java

Zepto js 庫文件的下載地址：https://github.com/madrobby/zepto ，直接下載源碼文件，相應的全部 js 文件就在 src 目錄下。jquery

2、手勢事件封裝

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

tap ：觸摸屏幕時觸發。git

singleTap ：單擊屏幕時觸發github

doubleTap：雙擊屏幕時觸發。(若是你不須要檢測單擊、雙擊，使用 tap 代替)。web

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

swipe：滑動屏幕時觸發。

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

3、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	提供 `$.Deferred`promises 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 庫文件就包括全部的功能呢？

答案是確定的。

4、Zepto 的定製

Zepto 容許將多個 js 文件打包成一個 js 文件。

操做步驟：

一、安裝 Nodejs 環境

二、下載 zepto.js 源碼並解壓好。

四、cmd 命令行進入解壓縮後的目錄

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

六、編輯 zepto.js 源碼中的 make文件，添加自定義模塊並保存，以下

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

增長本身須要的模塊：modules = (env['MODULES'] || 'zepto event ajax form ie fx selector touch').split(' ')

七、而後執行命令 npm run-script dist（這一步會在當前目錄生成一個dist文件夾）
八、查看目錄 dist ，裏面就有咱們打包好的 zepto.js 庫文件。

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

相關源碼已放置 Github

如下爲詳細代碼：

<!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();

});