該插件乃本博客作者所寫，目的在於提升作者的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);以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。