公司的移动端项目是基于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> <p 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> </p> <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);
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
h5表单验证有哪些方法
spring mvc+localresizeimg实现h5端图片压缩上传
canvas的绘图api使用详解
以上就是zepto实现移动端无缝向上下滚动的详细内容。