該插件乃本博客作者所寫(xiě)，目的在于提升作者的js能力，也給一些js菜鳥(niǎo)在使用插件時(shí)提供一些便利，老鳥(niǎo)就悠然地飛過(guò)吧。
公司的移動(dòng)端項(xiàng)目是基于zepto的，有一個(gè)頁(yè)面要求文字能夠無(wú)縫地不停向上滾動(dòng)，但查了網(wǎng)上的資料，大多都是基于jquery的，雖然稍作修改就可以用于移動(dòng)端，但不能實(shí)現(xiàn)觸摸上下翻滾。所以就去了zepto的官網(wǎng)查看其API，卻發(fā)現(xiàn)如果要使用zepto的swipe()方法，需要引用其已經(jīng)封裝好的touch.js文件，我就趕緊引用了這個(gè)js文件，可在實(shí)際測(cè)試中，官網(wǎng)給出的touch.js文件不能適用于swipe()方法，于是，一頭霧水，繼續(xù)查資料，由于網(wǎng)上關(guān)于zepto方面的東西較少，所以，也沒(méi)有找出其不能適用于swipe()方法的原因。后來(lái)，不經(jīng)意間發(fā)現(xiàn)由百度云Clouda團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)touch.js（目前，該js也是由這個(gè)團(tuán)隊(duì)在維護(hù)），在這個(gè)js環(huán)境下居然能使用swipe()方法，于是，趕緊拿來(lái)測(cè)試。結(jié)果很OK哇！這里要著重感謝百度云Clouda團(tuán)隊(duì)，你們真牛！??！ 在這里要注意，zepto本身是沒(méi)有animate()方法的，它是將這個(gè)方法封裝成了一個(gè)fx.js（去官網(wǎng)下載），所以在使用animate()時(shí)要引用fx.js。
若您覺(jué)得本插件有bug或不足之處，請(qǐng)留言，我將及時(shí)修改，謝謝！
以下是基于zepto的移動(dòng)端無(wú)縫向上滾動(dòng)并上下觸摸滑動(dòng)插件的完整代碼：
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>無(wú)標(biāo)題文檔</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, //數(shù)值越大，速度越慢 line:10 //觸摸翻滾的條數(shù) }); })</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){ //默認(rèn)配置 var defaults = { speed:40, //滾動(dòng)速度,值越大速度越慢 line:1 //滾動(dòng)的行數(shù) }; 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開(kāi)始，避免抖動(dòng) $(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); } //觸摸開(kāi)始 _this.on('touchstart', function(ev){ ev.preventDefault(); clearInterval($timer); }); //向上滑動(dòng) _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); } }); //向下滑動(dòng) _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); } }); //觸摸結(jié)束 _this.on('touchend',function(ev){ ev.preventDefault(); if($ul.height() > _this.height()){ marquee(_this, speed); } }); }); }})(Zepto);DEMO下載：基于zepto的插件之移動(dòng)端無(wú)縫向上滾動(dòng)并上下觸摸滑動(dòng)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
