极乐门资源网 Design By www.ioogu.com
该插件乃本博客作者所写,目的在于提升作者的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的插件之移动端无缝向上滚动并上下触摸滑动
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]