基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码

该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。

公司的移动端项目是基于zepto的，有一个页面要求文字能够无缝地不停向上滚动，但查了网上的资料，大多都是基于jquery的，虽然稍作修改就可以用于移动端，但不能实现触摸上下翻滚。所以就去了zepto的官网查看其API，却发现如果要使用zepto的swiPE()方法，需要引用其已经封装好的touch.js文件，我就赶紧引用了这个js文件，可在实际测试中，官网给出的touch.js文件不能适用于swipe()方法，于是，一头雾水，继续查资料，由于网上关于zepto方面的东西较少，所以，也没有找出其不能适用于swipe()方法的原因。后来，不经意间发现由百度云Clouda团队开发的一个touch.js（目前，该js也是由这个团队在维护），在这个js环境下居然能使用swipe()方法，于是，赶紧拿来测试。结果很OK哇！这里要着重感谢百度云Clouda团队，你们真牛！！！  在这里要注意，zepto本身是没有aniMATE()方法的，它是将这个方法封装成了一个fx.js（去官网下载），所以在使用animate()时要引用fx.js。

若您觉得本插件有bug或不足之处，请留言，我将及时修改，谢谢！

以下是基于zepto的移动端无缝向上滚动并上下触摸滑动插件的完整代码：

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>
    无标题文档/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, //数值越大，速度越慢        line:10    //触摸翻滚的条数    }
    );
    }
    )/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){
    //默认配置    VAR defaults = {
        speed:40,  //滚动速度,值越大速度越慢        line:1     //滚动的行数    }
    ;
        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开始，避免抖动                        $(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);
        }
                //触摸开始        _this.on('touchstart', function(ev){
                ev.preventDefault();
                clearInterval($timer);
        }
    );
                //向上滑动        _this.on('swipeup', function(ev){
                ev.PReventDefault();
                clearInterval($timer);
                if($ul.height() >
 _this.height()){
                       for(i=0;
    iopts.line;
i++){
                        $ul.find("li").First().appendTo($ul);
                   }
                    $ul.css("margin-top",0);
            }
        }
    );
                //向下滑动        _this.on('swipedown', function(ev){
                ev.preventDefault();
                clearInterval($timer);
                if($ul.height() >
 _this.height()){
                  for(i=0;
    iopts.line;
i++){
                      $ul.find("li").first().before($ul.find("li").last());
                      }
                                                                 $ul.css("margin-top",0);
            }
        }
    );
                //触摸结束        _this.on('touchend',function(ev){
                ev.preventDefault();
                if($ul.height() >
 _this.height()){
                  marquee(_this, speed);
            }
        }
    );
            }
    );
  }
}
    )(Zepto);
    

DEMO下载：基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！