基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码


Posted in HTML / CSS onDecember 20, 2016

该插件乃本博客作者所写,目的在于提升作者的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);

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 #HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 #HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 #HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 #HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 #HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 #HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 #HTML / CSS
You might like
Protoss兵种对照表
2020/03/14 星际争霸
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jquery 扑捉回车键事件代码
2014/04/24 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python快速排序算法实例分析
2017/11/29 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
养牛场项目建议书
2014/05/13 职场文书
个人授权委托书范文
2014/09/21 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
婚礼新人答谢词
2015/01/04 职场文书
飞越疯人院观后感
2015/06/09 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
React forwardRef的使用方法及注意点
2021/06/13 Javascript
python运行脚本文件的三种方法实例
2022/06/25 Python
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL