基于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团队，你们真牛！！！ 这里给出该团队开发的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的插件之移动端无缝向上滚动并上下触摸滑动的更多相关文章
- jquery插件之文字无缝向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...
- jquery插件之文字间歇自动向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- 原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...
- vue文字间歇无缝向上滚动
公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...
- js实现文字列表无缝向上滚动
body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...
- jquery无缝向上滚动实现代
<!DOCTYPE html><html><head><style type="text/css">.renav{width:200 ...
- 提示消息无缝向上滚动（vue）
<div class="order-tips__message-item" :class="getClass(index)" v-for="(o ...
- 基于zepto的移动端日期和时间选择控件
前段时间给大家分享过一个基于jQuery Mobile的移动端日期时间拾取器,大家反应其由于加载过大的插件导致影响调用速度.那么今天我把从网络上搜集到的两个适合移动端应用的日期和时间选择插件分享给大家 ...
随机推荐
- 直传文件到Azure Storage的Blob服务中
(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注.) 题记:为了庆祝获得微信公众号赞赏功能,忙里抽闲分享一下最近工作的一点心得:如何直接从浏览器中上传文件到Azure ...
- 高效jQuery的奥秘
讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染 ...
- Android开发的教程和资源
Android 设计指南非官方简体中文版 http://www.apkbus.com/design/index.html NDK下载 http://developer.android.com/tool ...
- Android Fragment学习笔记(二)----Fragment界面添加和管理
Fragment界面添加 了解过fragment的生命周期等简单知识,于是去看官方文档来了解更多相关内容,要添加fragment到我们的UI界面中,给出了两种常用的方法,第一个是在activity的布 ...
- nginx日志中文变成类型\xE9\xA6\x96\xE9\xA1\xB5-\xE6\x8E\xA8\xE8\x8D\x90的东西
感谢 http://my.oschina.net/leejun2005/blog/106791 代码如下: public class App { public static String str2He ...
- HDU 4821 String （HASH）
题意:给你一串字符串s,再给你两个数字m l,问你s中可以分出多少个长度为m*l的子串,并且子串分成m个长度为l的串每个都不完全相同 首先使用BKDRHash方法把每个长度为l的子串预处理成一个数字, ...
- FFmpeg与libx264 x264接口源代码简单分析
源代码位于“libavcodec/libx264.c”中.正是有了这部分代码,使得FFmpeg可以调用libx264编码H.264视频. 从图中可以看出,libx264对应的AVCodec结构体ff ...
- H5移动前端性能优化
在移动端,因手机的配置和3/4G网络的原因,从两个方面解决性能优化问题,1.加载不超过3秒,用loading或者资源不要超过1M.2.渲染速度. 基于以上两个方面,所有影响首屏加载和渲染的代码应在处理 ...
- css整理－06 表和列表
表格式化 表布局 table, display:table caption, display: table-caption thead, display: table-header-group tbo ...
- BZOJ2597 [Wc2007]剪刀石头布（最小费用最大流）
题目大概是说n个人两两进行比赛,问如何安排几场比赛的输赢使得A胜B,B胜C,C胜A这种剪刀石头布的三元组最多. 这题好神. 首先,三元组总共有$C_n^3$个 然后考虑最小化不满足剪刀石头布条件的三元 ...