您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

基于zepto的插件之移動(dòng)端無(wú)縫向上滾動(dòng)并上下觸摸滑動(dòng)實(shí)例代碼

2017/7/13 14:17:17來(lái)源：互聯(lián)網(wǎng)

該插件乃本博客作者所寫，目的在于提拔作者的js能力，也給一些js菜鳥(niǎo)在使用插件時(shí)提供一些便利，老鳥(niǎo)就悠然地飛過(guò)吧。

公司的移動(dòng)端項(xiàng)目是基于zepto的，有一個(gè)頁(yè)面要求筆墨能夠無(wú)縫地一直向上滾動(dòng)，但查了網(wǎng)上的資料，大多都是基于jquery的，雖然稍作修改就可以用于移動(dòng)端，但不能實(shí)現(xiàn)觸摸上下翻滾。所以就去了zepto的官網(wǎng)查看其API，卻發(fā)現(xiàn)假如要使用zepto的swipe()方法，必要引用其已經(jīng)封裝好的touch.js文件，我就趕快引用了這個(gè)js文件，可在現(xiàn)實(shí)測(cè)試中，官網(wǎng)給出的touch.js文件不能適用于swipe()方法，于是，一頭霧水，繼承查資料，因?yàn)榫W(wǎng)上關(guān)于zepto方面的東西較少，所以，也沒(méi)有找出其不能適用于swipe()方法的緣故原由。后來(lái)，不經(jīng)意間發(fā)現(xiàn)由百度云Clouda團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)touch.js（目前，該js也是由這個(gè)團(tuán)隊(duì)在維護(hù)），在這個(gè)js環(huán)境下居然能使用swipe()方法，于是，趕快拿來(lái)測(cè)試。效果很OK哇！這里要偏重感謝百度云Clouda團(tuán)隊(duì)，你們真牛！?。?nbsp; 在這里要細(xì)致，zepto自己是沒(méi)有animate()方法的，它是將這個(gè)方法封裝成了一個(gè)fx.js（去官網(wǎng)下載），所以在使用animate()時(shí)要引用fx.js。

若您覺(jué)得本插件有bug或不足之處，請(qǐng)留言，我將及時(shí)修改，謝謝！

以下是基于zepto的移動(dòng)端無(wú)縫向上滾動(dòng)并上下觸摸滑動(dòng)插件的完備代碼：

HTML部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title>無(wú)題目文檔</title>
<style>
*{margin:0;padding:0}
li{list-style:none;}
.box{margin:20px;width:200px;height:128px;overflow:hidden;border:1px solid #ccc;padding:5px 10px 15px;font-size:14px;}
.box ul li{line-height:20px;}
</style>
</head>

<body>
<div class="box">
  <ul>
    <li>11111111111222222</li>
    <li>2222222202</li>
    <li>3333333303</li>
    <li>4444444404</li>
    <li>5555555505</li>
    <li>6666666606</li>
    <li>1111111111</li>
    <li>2222222202</li>
    <li>3333333303</li>
    <li>4444444404</li>
    <li>5555555505</li>
    <li>6666666606</li>
  </ul>
</div>
<script src="zepto.min.js"></script>
<script src="fx.js"></script>
<script src="touch-0.2.14.min.js"></script>
<script src="zepto.textSlider.js"></script>
<script>
$(function(){
    $(".box").textSlider({
        speed: 50, //數(shù)值越大，速度越慢
        line:10    //觸摸翻滾的條數(shù)
    });
    })
</script>
</body>

插件 zepto.textSlider.js 部分：

/*
* textSlider 0.1
* Copyright (c) 2014 tnnyang 
* Dependence Zepto v1.1.6 & fx.js & touch-0.2.14.min.js
* Author by 小壞
*/ 
(function($){
    $.fn.textSlider = function(options){
    //默認(rèn)配置
    var defaults = {
        speed:40,  //滾動(dòng)速度,值越大速度越慢
        line:1     //滾動(dòng)的行數(shù)
    };
    
    var opts = $.extend({}, defaults, options);
    
    var $timer;
    function marquee(obj, _speed){                                              
        var top = 0;
        var margintop;
        $timer = setInterval(function(){            
            top++;
            margintop = 0-top;
            obj.find("ul").animate({
                marginTop: margintop
                },0,function(){
                    var s = Math.abs(parseInt($(this).css("margin-top")));                                
                    if(s >= 20){
                        top = 0;
                        $(this).css("margin-top", 0);   //確保每次都是從0開(kāi)始，避免抖動(dòng)
                        $(this).find("li").slice(0, 1).appendTo($(this));                
                    }
                });                        
        }, _speed);
      }
      
    this.each(function(){            
        var speed = opts["speed"],line = opts["line"],_this = $(this);
        var $ul =_this.find("ul");
        if($ul.height() > _this.height()){            
            marquee(_this, speed);
        }
        
        //觸摸開(kāi)始
        _this.on('touchstart', function(ev){
            ev.preventDefault();
            clearInterval($timer);
        });
        
        //向上滑動(dòng)
        _this.on('swipeup', function(ev){
            ev.preventDefault();
            clearInterval($timer);
            if($ul.height() > _this.height()){    
               for(i=0;i<opts.line;i++){
                    $ul.find("li").first().appendTo($ul);
                   }
                $ul.css("margin-top",0);
            }
        });
        
        //向下滑動(dòng)
        _this.on('swipedown', function(ev){
            ev.preventDefault();
            clearInterval($timer);
            if($ul.height() > _this.height()){
              for(i=0;i<opts.line;i++){
                  $ul.find("li").first().before($ul.find("li").last());    
                  }                                             
                $ul.css("margin-top",0);
            }
        });
        
        //觸摸結(jié)束
        _this.on('touchend',function(ev){
            ev.preventDefault();
            if($ul.height() > _this.height()){
              marquee(_this, speed);
            }
        });     
    });
  }
})(Zepto);

DEMO下載：基于zepto的插件之移動(dòng)端無(wú)縫向上滾動(dòng)并上下觸摸滑動(dòng)

以上就是本文的悉數(shù)內(nèi)容，盼望對(duì)大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。

[教程作者：滬-小壞]
關(guān)鍵詞：zepto zepto的插件 無(wú)縫滾動(dòng) 觸摸滑動(dòng)
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://irelandcustomcontracting.com/tutorial/wd227.html
詳解前端HTML5幾種存儲(chǔ)體例的總結(jié)
html5 postMessage解決跨域、跨窗口新聞傳遞方案
圖趣網(wǎng)微信
建議反饋
×