基于zepto的插件之移動端無縫向上滾動并上下觸摸滑動實例代碼
該插件乃本博客作者所寫，目的在于提拔作者的js能力，也給一些js菜鳥在使用插件時提供一些便利，老鳥就悠然地飛過吧。
公司的移動端項目是基于zepto的，有一個頁面要求筆墨能夠無縫地一直向上滾動，但查了網(wǎng)上的資料，大多都是基于jquery的，雖然稍作修改就可以用于移動端，但不能實現(xiàn)觸摸上下翻滾。所以就去了zepto的官網(wǎng)查看其API，卻發(fā)現(xiàn)假如要使用zepto的swipe()方法，必要引用其已經(jīng)封裝好的touch.js文件，我就趕快引用了這個js文件，可在現(xiàn)實測試中，官網(wǎng)給出的touch.js文件不能適用于swipe()方法，于是，一頭霧水，繼承查資料，因為網(wǎng)上關(guān)于zepto方面的東西較少，所以，也沒有找出其不能適用于swipe()方法的緣故原由。后來，不經(jīng)意間發(fā)現(xiàn)由百度云Clouda團隊開發(fā)的一個touch.js（目前，該js也是由這個團隊在維護），在這個js環(huán)境下居然能使用swipe()方法，于是，趕快拿來測試。效果很OK哇！這里要偏重感謝百度云Clouda團隊，你們真牛?。?！ 在這里要細致，zepto自己是沒有animate()方法的，它是將這個方法封裝成了一個fx.js（去官網(wǎng)下載），所以在使用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, //數(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, //滾動速度,值越大速度越慢
line:1 //滾動的行數(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開始，避免抖動
$(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);
}
});
//觸摸結(jié)束
_this.on('touchend',function(ev){
ev.preventDefault();
if($ul.height() > _this.height()){
marquee(_this, speed);
}
});
});
}
})(Zepto);DEMO下載：基于zepto的插件之移動端無縫向上滾動并上下觸摸滑動
以上就是本文的悉數(shù)內(nèi)容，盼望對大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。
本文地址：http://m.likemindfilms.com/tutorial/wd227.html
