Swipe2.1更新——移动Web内容滑块
Swipe JS 是一个轻量级(3.7 kb) mobile slider,支持 1:1 触摸移动(基于精确的触摸位置的内容滑动)。
但是我使用一段时间后发现两个bug,所以在官方2.0(官网http://swipejs.com/)的基础上我做了一下优化,在这里定义为swipe2.1吧。
两点优化:
1、解决触摸滑动结束后停止自动播放的bug(代码分析,这里只提下修复bug的地方);
handleEvent: function(event) {
switch (event.type) {
case 'touchstart': this.start(event); break;
case 'touchmove': this.move(event); break;
case 'touchend': offloadFn(this.end(event)); //去掉滑动结束后的break
} end: function(event) {
element.removeEventListener('touchmove', events, false);
element.removeEventListener('touchend', events, false); //在这之后添加
delay = options.auto;
}
2、解决不同高度的tab切换是,高度低的tab底部有大量空白的bug(代码分析,这里只提下修复bug的地方);
var height, heights = [];
function setup() {
//前面不变...
container.style.visibility = 'visible'; //在这之后加
container.style.height = slides[index].offsetHeight + 'px';//修复不同高度之间的切换
} function slide(to, slideSpeed) {
//前面不变...
offloadFn(options.callback && options.callback(index, slides[index])); //在这之后加
setHeight(to);
}
function setHeight(index){
//修复不同高度之间的切换
if(-1< index && index < slides.length){
height = slides[index].offsetHeight;
container.style.height = height + 'px';
}
}
百度分享下载地址 swipe-2.1.min.js
Swipe2.1更新——移动Web内容滑块的更多相关文章
- [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...
- Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》
http://www.cnblogs.com/lhb25/archive/2013/04/02/50-jquery-plugins-d.html responsive-carousel 是一个内容传送 ...
- Devrama Slider - 支持任意 HTML 的内容滑块
Devrama Slider 是一个图片滑块,支持很多特色功能.除了支持图片滑动,其它的 HTML 内容也支持.主要特色:响应式.图片预加载.图片延迟加载.进度条.自定义导航栏和控制按钮等等. 在线演 ...
- 第十 构建Web内容的技术
第十章 构建Web内容的技术 一.HTML HTML(HyperText Markup Language,超文本标记语言)是为了发送Web 上的超文本(Hypertext)而开发的标记语言.超文本是一 ...
- Hashslider – 带有 Hash 标签功能的 jQuery 内容滑块
Hashslider 实现了常见的 jQuery 滑块的功能,特别之处在于给 URL 加上了标签,因此你能够连接到滑块的某块内容.滑块的内容也可以从外部的 HTML 文件获取. 您可能感兴趣的相关文章 ...
- 40 个顶级 jQuery 图片、内容滑块和幻灯片(转)
在这个快速发展的网络世界中,我们使用图片.内容滑块和幻灯片来给网站实现良好.有吸引力的外观.你可以吸引浏览者借助图像滑块让网站更加具有活力.使用 JavaScript 可以轻松实现轻量级的图片和内容滑 ...
- HTML与CSS入门——第二章 发布Web内容
知识点: 1.使用文本编辑器创建一个基本的HTML文件的方法 2.使用FTP将文件传送到你的Web服务器的方法 3.文件在Web服务器上应该存储的位置 4.在没有Web服务器的情况下分发Web内容的方 ...
- SQL技巧两则:选择一个表的字段插入另一个表,根据其它表的字段更新本表内容
最近,在作django数据表迁移时用到的. 因为在django中,我把本来一个字符型字段,更改成了外键, 于是,哦喝~~~字符型字段相当于被删除了, 为了能导入这些字段的外键信息,于是出此下策. 其实 ...
- 40 个顶级 jQuery 图片、内容滑块和幻灯片
在这个快速发展的网络世界中,我们使用图片.内容滑块和幻灯片来给网站实现良好.有吸引力的外观.你可以吸引浏览者借助图像滑块让网站更加具有活力.使用 JavaScript 可以轻松实现轻量级的图片和内容滑 ...
随机推荐
- [原]Unity3D深入浅出 - 常见三维软件与Unity3D的单位比例
Unity3d系统默认单位是米 Maya:Unity3D 1M:100M 3DMax:Unity3D 100M:1M Cinema 4D:Unity3D 1M:100M Lightwavew:Uni ...
- [.NET WebAPI系列01] WebAPI 简单例子
[源] 来自微软WebAPI官方视频,Introduction to the ASP.NET Web API --Uniform Interface -- Demo-Using convention ...
- 各种兼容的placeholder
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 【原创】深度神经网络(Deep Neural Network, DNN)
线性模型通过特征间的现行组合来表达“结果-特征集合”之间的对应关系.由于线性模型的表达能力有限,在实践中,只能通过增加“特征计算”的复杂度来优化模型.比如,在广告CTR预估应用中,除了“标题长度.描述 ...
- NET下RabbitMQ实践[WCF发布篇]
在之前的两篇文章中,主要介绍了RabbitMQ环境配置,简单示例的编写.今天将会介绍如何使用WCF将RabbitMQ列队以服务的方式进行发布. 注:因为RabbitMQ的官方.net ...
- CCR
不用任何与创建线程.资源互斥有关系的API写多线程程序 这次的例子,是一个很简单的控制台,她将面对瞬间提交的百万的数据,而面不改色(CPU.内存非常平稳),队列中始终只保存最新的数据,每次只处理cpu ...
- mac usb转串口 连接树莓PI
USB 转串口是淘宝买的 http://item.taobao.com/item.htm?spm=a1z09.2.9.50.YOJBwG&id=38963495468&_u=4m1dr ...
- <转>LeetCode 题目总结/分类
原链接:http://blog.csdn.net/yangliuy/article/details/44514495 注:此分类仅供大概参考,没有精雕细琢.有不同意见欢迎评论~ 利用堆栈:http:/ ...
- SSDT Hook结构
目录 SSDT Hook效果图 SSDT简介 SSDT结构 SSDT HOOK原理 Hook前准备 如何获得SSDT中函数的地址呢 SSDT Hook流程 SSDT Hook实现进程保护 Ring3与 ...
- Docker系列(七)Shipyard安装及介绍
Shipyard 是一个基于 Web 的 Docker 管理工具,支持多 host,可以把多个 Docker host 上的 containers 统一管理:可以查看 images,甚至 build ...