Swipe JS – 移动WEB页面内容触摸滑动类库
http://www.jiawin.com/swipe-mobile-touch-slider/
想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触摸操作也是移动设备的中一个特性,我们必须专业化的处理,哈哈。其实实现原理很简单,但平常中自己开发不是很方便。
今天就为大家带来这样子的一个轻量级js触摸滑动类库 – Swipe JS。这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放、等比例缩放等等实用性的功能。
Swipe函数介绍
下面就为大家介绍下Swipe JS的使用方法,Swipe有以下几个参数:
startSlide: 4, //起始图片切换的索引位置 auto: 3000, //设置自动切换时间,单位毫秒 continuous: true, //无限循环的图片切换效果 disableScroll: true, //阻止由于触摸而滚动屏幕 stopPropagation: false, //停止滑动事件 callback: function(index, element) {}, //回调函数,切换时触发 transitionEnd: function(index, element) {} //回调函数,切换结束调用该函数。
除此之外,还有一些比较使用的API方法,例如:
- prev():上一页
- next():下一页
- getPos():获取当前页的索引
- getNumSlides():获取所有项的个数
- slide(index, duration):滑动方法
Swipe使用方法
了解基本函数方法后,我们就来看看使用方法。
首先是HTML结构:
<div id="slider" class="swipe"><div class="swipe-wrap"><div></div><div></div><div></div></div> </div>
然后是样式代码:
.swipe {overflow: hidden;visibility: hidden;position: relative; } .swipe-wrap {overflow: hidden;position: relative; } .swipe-wrap > figure {float: left;width: 100%;position: relative; }
最后设置JS绑定以及参数设置:
var slider = Swipe(document.getElementById('slider'), {…………………… });
在这里只要把上面介绍的函数参数写在里面,就可以实现相对应的功能。
最后我们也可以给滑动切换添加上下按钮:
<button οnclick="Swipe.prev()">prev</button> <button οnclick="Swipe.next()">next</button>
到这里我们已经完成了图片滑动的效果了,是不是非常的方便快捷呢?赶紧动手试试看吧。
转载于:https://www.cnblogs.com/nc-blog/p/3998445.html
Swipe JS – 移动WEB页面内容触摸滑动类库相关推荐
- (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作...
http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...
- Java 技术篇 - 从指定的web网页页面中读取html内容实例演示,从http协议下的url地址中读取web页面内容方法
实例为从我文章中读取标题. 通过 class 属性锁定标题元素,把匹配的内容打印出来. 下面是源码: package com.test.test;import java.io.*; import ja ...
- js 读取php页面内容,js读取html文件 js获取html页面显示内容
CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码 如题,CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码 JS读取TXT文件内容的代码如下: 读 ...
- 使用pdf.js在web页面展示pdf文件
最近弄的项目中需要在线展示PDF文件,以前用的是Adobe PDF阅读器直接在浏览器端打开的,这要求客户端必须安装这个软件,若是没有安装就不能在线预览了.为了解决这个问题,最终决定用pdf.js来实现 ...
- js处理web页面滚动条
应用场景:当页面上的元素超过一屏后,待操作的元素在页面可视区域外时,是不能直接定位到,会报元素不可见错误:is not clickable at point!! 解决办法:要将待操作的元素滚动到可视区 ...
- html页面推送功能的实现,想实现Web页面内容自动更新?你需要了解WEB实时推送技术!...
随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高 ,比如,工业运行监控.Web 在线通讯.即时报价系统.在线游戏等,都需要将后台发生的变化主动地.实时地传送到浏览器端,而不需要用户手动 ...
- Eva.js 渲染Web页面动画
Eva.js v1.2 已在以下项目中使用:淘宝双11 / 芭芭农场 / 淘宝斗地主 / 薅羊毛赚话费, Evs.js 现已支持淘宝 / 支付宝小程序中互动游戏的开发 RaxEva 是一个让开发同学能 ...
- JS在web页面中调起本地应用程序
实现这个功能有两种方式: 方法一:可以使用ie浏览器独有的ActiveX控件,此方法只支持IE浏览器 <html><body><button onclick='Run(& ...
- Swiper移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
最新文章
- 转载 - 10个基于jQuery实现的漂亮网站赏析
- 将选定的文本对象左对齐、右对齐或对中
- DIOCP (一) DIOCP常见问题。
- arcgis Manager 登陆时提示Incorrect login Information
- 获取ntoskrnl的基址
- complete checkbox in Fiori
- pysql与mysql的区别_postgresql与mysql的区别是什么
- pl/postgresql_将PostgreSQL PL / Java安装为PostgreSQL扩展
- 春天猫rtsy_春天:注入列表,地图,可选对象和getBeansOfType()陷阱
- 使用vux组件库常见报错($t)处理
- javascript的事件绑定与事件委托
- 宿舍管理系统【C语言建工程及多文件练习】
- 海马苹果助手ipad版_苹果IPA文件签名,软件掉签问题,自己也能轻松解决
- 4刀最多切割一个正方体为多少块
- C语言加油站程序,C语言解决 加油站问题
- 百度服务获取坐标放置在天地图上实例
- 群晖docker位置_OMV利用Docker配置nextcloud,实现个人网盘的搭建!
- 计算机专业硕士论文字数要求,计算机专业硕士论文写作格式要求(参考)
- vue手机端项目php,MintUI基于Vue.js移动端组件库详解
- 随笔(面试相关)(杂)
热门文章
- javascript中三个等号的意思
- java怎么让进程停止_JAVA:如何在进程停止时调用一个方法(甚至有可能吗?)
- java的类型默认存储类型_java 问题:保存对话框的默认文件类型?
- dram和nand哪个难生产_DRAM与NAND差别这么大,存储之争都争啥
- 应力循环次数60ant_循环超临界CO2对煤的孔隙结构和力学特性的影响研究
- ubuntu声卡相关
- 启动springboot报错Error creating bean with name 'dataSource' defined in class path resource
- 新的 FreeBSD 核心团队选举结果出炉
- 一个重复try语句的实验
- PCL、XPS转换成PDF的控件activePDF Meridian​