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

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

创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都做网站、成都网站建设、成都外贸网站建设、敖汉网络推广、微信小程序定制开发、敖汉网络营销、敖汉企业策划、敖汉品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联建站为所有大学生创业者提供敖汉建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com

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


网站栏目:基于zepto插件如何实现移动端无缝向上滚动并上下触摸滑动
分享地址:http://azwzsj.com/article/gjdjop.html

其他资讯