• 基于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团队,你们真牛!!!  这里给出该团队开发的touchJS地址:Touch.js 。在这里要注意,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 http://tnnyang.cnblogs.com/
    * 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<opts.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;i<opts.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的插件之移动端无缝向上滚动并上下触摸滑动

  • 相关阅读:
    通配符
    Hibernate入门简介
    Java的参数传递是值传递?
    Java线程详解
    java基础总结
    谈谈对Spring IOC的理解
    Oracle SQL语句之常见优化方法总结--不定更新
    JVM 工作原理和流程
    Java中的String为什么是不可变的? -- String源码分析
    Spring AOP 简介
  • 原文地址:https://www.cnblogs.com/tnnyang/p/4778959.html
一二三 - 开发者的网上家园