该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。

公司的移动端项目是基于zepto的，有一个页面要求文字能够无缝地不停向上滚动，但查了网上的资料，大多都是基于jquery的，虽然稍作修改就可以用于移动端，但不能实现触摸上下翻滚。所以就去了zepto的官网查看其API，却发现如果要使用zepto的swipe()方法，需要引用其已经封装好的touch.js文件，我就赶紧引用了这个js文件，可在实际测试中，官网给出的touch.js文件不能适用于swipe()方法，于是，一头雾水，继续查资料，由于网上关于zepto方面的东西较少，所以，也没有找出其不能适用于swipe()方法的原因。后来，不经意间发现由百度云Clouda团队开发的一个touch.js（目前，该js也是由这个团队在维护），在这个js环境下居然能使用swipe()方法，于是，赶紧拿来测试。结果很OK哇！这里要着重感谢百度云Clouda团队，你们真牛！！！  这里给出该团队开发的touchJS地址：Touch.js 。在这里要注意，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 http://tnnyang.cnblogs.com/

* 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);

DEMO下载：基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动的更多相关文章

  1. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  2. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

  3. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  4. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  5. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  6. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  7. jquery无缝向上滚动实现代

    <!DOCTYPE html><html><head><style type="text/css">.renav{width:200 ...

  8. 提示消息无缝向上滚动（vue）

    <div class="order-tips__message-item" :class="getClass(index)" v-for="(o ...

  9. 基于zepto的移动端日期和时间选择控件

    前段时间给大家分享过一个基于jQuery Mobile的移动端日期时间拾取器,大家反应其由于加载过大的插件导致影响调用速度.那么今天我把从网络上搜集到的两个适合移动端应用的日期和时间选择插件分享给大家 ...

随机推荐

  1. WPF PRISM开发入门二(Unity依赖注入容器使用)

    这篇博客将通过一个控制台程序简单了解下PRISM下Unity依赖注入容器的使用.我已经创建了一个例子,通过一个控制台程序进行加减乘除运算,项目当中将输入输出等都用接口封装后,结构如下: 当前代码可以点 ...

  2. [Linux][Hadoop] 运行WordCount例子

    紧接上篇,完成Hadoop的安装并跑起来之后,是该运行相关例子的时候了,而最简单最直接的例子就是HelloWorld式的WordCount例子.   参照博客进行运行:http://xiejiangl ...

  3. 阿里云（ECS）Centos服务器LNMP环境搭建

    阿里云( ECS ) Centos7 服务器 LNMP 环境搭建 前言 第一次接触阿里云是大四的时候,当时在校外公司做兼职,关于智能家居项目的,话说当时俺就只有一个月左右的 php 后台开发经验(还是 ...

  4. JQuery常用函数及功能小结－－转载

    1.文档加载完成执行函数 $(document).ready(function(){  alert("开始了"); }); 2.添加/删除CSS类 $("#some-id ...

  5. ubuntu使用笔记

    查看自己系统版本: 使用命令:cat /proc/version 查看:proc目录下记录的当前系统运行的各种数据,version记录的版本信息可以直接通过cat查看到,还可以看到我的gcc版本呢. ...

  6. css样式—字体垂直、水平居中

    “来,老板娘,给个div瞅瞅”: “好的,宇哥,来了了了”: <div class="tt">啦啦啦</div> “给各样啊,我去”: “是”: .tt{ ...

  7. Dapper ORM 用法—Net下无敌的ORM(转)

    假如你喜欢原生的Sql语句,又喜欢ORM的简单,那你一定会喜欢上Dapper这款ROM.点击下载Dapper的优势:1,Dapper是一个轻型的ORM类.代码就一个SqlMapper.cs文件,编译后 ...

  8. 静态数据成员（面向对象的static关键字）

    静态数据成员: 在类内数据成员的声明前加上关键字static,该数据成员就是类内的静态数据成员.先举一个静态数据成员的例子. #include<iostream> using namesp ...

  9. CF# 334 Moodular Arithmetic

    B. Moodular Arithmetic time limit per test 1 second memory limit per test 256 megabytes input standa ...

  10. BZOJ4451 : [Cerc2015]Frightful Formula

    $(i,1)$对答案的贡献为$l_iC(2n-i-2,n-i)a^{n-1}b^{n-i}$. $(1,i)$对答案的贡献为$t_iC(2n-i-2,n-i)*a^{n-i}b^{n-1}$. $(i ...