您现在的位置是：网站首页> 编程资料编程资料

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码 Zepto.js宝箱开启动画抽奖特效源码

2023-10-13 355人已围观

简介这篇文章主要介绍了基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码，非常具有实用价值，需要的朋友可以参考下。

该插件乃本博客作者所写，目的在于提升作者的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部分：

无标题文档11111111111222222
2222222202
3333333303
4444444404
5555555505
6666666606
1111111111
2222222202
3333333303
4444444404
5555555505
6666666606

插件 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);

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：详解HTML5中表单验证的8种方法介绍html5自带表单验证体验优化及提示气泡修改功能HTML5 表单验证失败的提示语问题使用HTML5和CSS3表单验证功能HTML5实现表单自动验证功能实例代码使用HTML5的表单验证的简单示例HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法HTML5表单验证特性(知识点小结)

下一篇：HTML5利用约束验证API来检查表单的输入数据的代码实例HTML5表单验证特性(知识点小结)html5自带表单验证体验优化及提示气泡修改功能HTML5 表单验证失败的提示语问题使用HTML5和CSS3表单验证功能HTML5实现表单自动验证功能实例代码html5的input的required使用中遇到的问题及解决方法html5中valid、invalid、required的定义wordpress添加Html5的表单验证required方法小结

您现在的位置是：网站首页> 编程资料编程资料

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码 Zepto.js宝箱开启动画抽奖特效源码

相关内容

点击排行

本栏推荐

猜你喜欢