zepto实现移动端无缝向上下滚动-H5教程-PHP中文网

首页

web前端

H5教程

zepto实现移动端无缝向上下滚动

php中世界最好的语言

Mar 26, 2018 pm 01:28 PM

zepto上下

这次给大家带来zepto实现移动端无缝向上下滚动，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。

若您觉得本插件有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>
<p 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>
</p>
<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(&#39;swipedown&#39;, 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(&#39;touchend&#39;,function(ev){
            ev.preventDefault();
            if($ul.height() > _this.height()){
              marquee(_this, speed);
            }
        });        
    });
  }
})(Zepto);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5表单验证有哪些方法

spring mvc+localResizeIMG实现H5端图片压缩上传

canvas的绘图api使用详解

以上是zepto实现移动端无缝向上下滚动的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5代码示例：实际应用和教程Apr 25, 2025 am 12:10 AM

H5提供了多种新特性和功能，极大地增强了前端开发的能力。1.多媒体支持：通过和元素嵌入媒体，无需插件。2.画布（Canvas）：使用元素动态渲染2D图形和动画。3.本地存储：通过localStorage和sessionStorage实现数据持久化存储，提升用户体验。

H5和HTML5之间的连接：相似性和差异Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一个版本，包含新元素和API；H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码，H5应用则需要容器运行并通过JavaScript与原生代码交互。

H5代码的基础：密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

HTML5和H5：了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别，H5是HTML5的简称。1.HTML5是HTML的第五个版本，增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用，适用于各种移动设备。

HTML5：现代网络的基础（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本，由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强，提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签，如、、、等，使网页结构更清晰，SEO效果更好。HTML5支持多媒体元素和，无需第三方插件，提升了用户体验和加载速度。HTML5增强了表单功能，引入了新的输入类型如、等，提高了用户体验和表单验证效率。

H5代码：编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码？答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等，提升代码可读性和SEO效果。2.保持代码结构化和可读性，使用适当缩进和注释。3.优化性能，通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误，如标签未闭合，确保代码有效性。