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

2024-09-05 07:21:52

字体：大中小

来源：转载

供稿：网友

该插件乃本博客作者所写，目的在于提升作者的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;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的插件之移动端无缝向上滚动并上下触摸滑动

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

上一篇：html5 postMessage解决跨域、跨窗口消息传递方案

下一篇：HTML5利用约束验证API来检查表单的输入数据的代码实例