13518219792
小编给大家分享一下zepto如何实现移动端无缝向上下滚动功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
站在用户的角度思考问题，与客户深入沟通，找到石河子网站设计与石河子网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广、申请域名、网络空间、企业邮箱。业务覆盖石河子地区。
公司的移动端项目是基于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。
以下是基于zepto的移动端无缝向上滚动并上下触摸滑动插件的完整代码：
HTML部分：
无标题文档
插件 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 _this.height()){
for(i=0;i _this.height()){
marquee(_this, speed);
}
});
});
}
})(Zepto); 以上是zepto如何实现移动端无缝向上下滚动功能的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
