基于zepto插件如何实现移动端无缝向上滚动并上下触摸滑动

这篇文章将为大家详细讲解有关基于zepto插件如何实现移动端无缝向上滚动并上下触摸滑动，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

HTML部分：

  
    
11111111111222222
    
2222222202
    
3333333303
    
4444444404
    
5555555505
    
6666666606
    
1111111111
    
2222222202
    
3333333303
    
4444444404
    
5555555505
    
6666666606
  

插件 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;i _this.height()){              for(i=0;i _this.height()){              marquee(_this, speed);            }        });            });  }})(Zepto);

关于"基于zepto插件如何实现移动端无缝向上滚动并上下触摸滑动"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。