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]小地图的制作
继续今天的学习心得,unity中小地图的制作,实现了小地图中红色小箭头代表场景中的主角,然后人物方向的转变,小地图中箭头也随之改变方向. 效果图 右上角就是小地图,上面有个红色小箭头就是代表主 ...
- 通过移动的Mas接口发送短信
1. 首先,需要移动公司提供的用户名.密码.服务ID.接口Url等信息. 2. 将短信信息整理成XML格式的字符串,再转为byte数组,通过POST的方式,将短信发往Mas接口.需要引用"M ...
- UVa 400 (水题) Unix ls
题意: 有n个文件名,排序后按列优先左对齐输出.设最长的文件名的长度为M,则最后一列长度为M,其他列长度为M+2. 分析: 这道题很简单,但要把代码写的精炼,还是要好好考虑一下的.lrj的代码中有两个 ...
- [2015编程之美] 第一场C
题目3 : 质数相关 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 两个数a和 b (a<b)被称为质数相关,是指a × p = b,这里p是一个质数.一个集合S被 ...
- Java [leetcode 18]4Sum
问题描述: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d ...
- Crosstool-ng制作交叉编译工具链
Crosstool-ng制作交叉编译工具链 交叉编译器可以用现成的,比如CodeSourcery制作的交叉编译器,也可以自己制作,一般是用kernel+gcc+glibc+binutils的源码包来编 ...
- Serv-U软件在64位操作系统下使用不了odbc解决方法
这是因为64位Windows上有两个ODBC连接,你需要创建一个32位的ODBC连接.打开32位ODBC管理器的位置 X:\Windows\syswow64\odbcad32.exe. 利用这个管理器 ...
- 向Oracle数据库中插入数据出错:ORA-01036 无效的变量名或数据
向Oracle数据库中插入数据出错: 经过排查,因为Update数据时没有出错,所以OracleHelper没有问题: 看异常信息提示:无效的变量和数据,应该是SQL语句的问题,调试时所传的实例Use ...
- SpringSide 3 中的多数据源配置的问题
在SpringSide 3 中,白衣提供的预先配置好的环境非常有利于用户进行快速开发,但是同时也会为扩展带来一些困难.最直接的例子就是关于在项目中使用多个数据源的问题,似乎很难搞.在上一篇中,我探讨了 ...
- longblogV1.0——我的静态博客发布系统
longblogV1.0——我的静态博客发布系统 环境依赖: python3-markdown 作者:IT小小龙个人主页:http://long_python.gitcafe.com/电子邮箱:lon ...