使用hammer.js实现移动端webAPP手势滑动切换页面

最新推荐文章于 2024-04-13 17:39:32 发布
最新推荐文章于 2024-04-13 17:39:32 发布
阅读量4.8k 收藏 2
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33852052/article/details/75093965
版权

Hammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。

Hammer是一个轻量级的JavaScript库，它可以在不依赖任何其他东西的情况下识别触摸和鼠标事件。

因为项目需要研究了一下该插件，写了一个简单的页面切换的demo。第一次发博客，有点那啥哈。。。哈哈哈，不多说，上代码。

先到GitHub上下载hammer.js  导入相应的JS文件

导入对应的js文件。注：hammer是基于jQuery的，必须引入jQuery / zepto
<script src="jquery.min.js"></script>
<script src="hammer.js"></script>



html文件结构如下
<div id="container">
<div class="page pageNone"><a href="hammerTestPage2.html">111</a></

最低0.47元/天 解锁文章
qq_33852052
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html移动端实现滑动切换,js实现移动端轮播图滑动切换
weixin_40003512的博客
06-05 1137
本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码，供大家参考，具体内容如下移动端手势轮播图分析1、自动轮播且无缝 [定时器、过渡动画]2、分页器要随着图片的轮播而改变 [根据索引切换]3、滑动效果 [touch事件]4、图片随着分页器变化5、滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去 [过渡]6、滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换 [滑动方向 + 过...
移动端滑动切换tab页
02-04
移动端滑动时切换tab页，类似于Android版本的微信和新浪微博发现页面中的滑动切换效果，我分别使用了基于swipe插件和zepto插件的两种方法，均可完美实现；
APP开发_Hammer.js 触摸事件处理库教程
最新发布
突破编程
04-13 1436
Hammer.js 触摸事件处理库教程
短视频商城源码，移动端左右滑动切换页面效果
云豹网络科技
09-08 253
短视频商城源码，移动端左右滑动切换页面效果实现 功能分析： 点击顶部菜单可以跳转到对应的页面。 按压屏幕，左右滑动可以切换页面。 首次，只有首页的内容才会加载。 其他页面，只有进入之后，才会加载。 思考分析： 需要一个菜单组件，点击后修改 tabIndex(显示哪个页面) 需要一个 ScrollTab组件，控制 手指按压事件，控制显示哪个tabIndex 需要一个 ScrollTabCol组件，包裹真正的 Page组件，来控制是否加载。 结果： ScrollTab 需要接受一个参数(tabIndex)，来控
JS+CSS实现滑动切换tab菜单效果
10-23
主要介绍了JS+CSS实现滑动切换tab菜单效果,涉及javascript鼠标事件及页面元素样式的动态切换效果实现技巧,需要的朋友可以参考下
利用Swipejs轻松实现手机上的图片手势切换
weixin_30291791的博客
04-17 180
【原创】转载请注明出处，独立博客地址http://www.92ez.com 插件官网：http://www.swipejs.com github地址：https://github.com/bradbirdsall/Swipe 使用方法： 按照下图代码的形式完成html部分 以上代码表示了两个容器，里面容器内包裹了单个项目，下面给容器添加事件 作者建议最好将事件绑定这个js放到页...
hammer.js移动端图片手指缩放插件
07-22
总的来说，Hammer.js 通过其强大的手势识别能力，结合JavaScript事件监听和处理，为移动端图片手指缩放提供了简单易用的解决方案。开发者可以根据需求，灵活地扩展和定制功能，提升移动应用的交互性。
hammer.js实现图片手势放大效果
10-19
主要为大家详细介绍了hammer.js实现图片手势放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Hammer.js移动端手势库实例
09-26
里面包括很多事例，可以实现div,img的缩放，旋转，滑动 还有在指定区域内滑动不能覆盖其他区域，还有很多其他实例自己挖掘，http://www.cnblogs.com/vajoy/p/4011723.html一份官方翻译说明，附有操作说明书。
webapp第一次手势提醒
温暖的博客
10-12 524
//是否第一次进入该页面，如果是第一次则加载引导页 var firstAccess = localStorage.getItem("order_banner_buyer"); if(firstAccess == "1"){ //已经访问过了 $(".lead").hide(); $(".cover2").hide(); }else{//第一次访问
JavaScript 实现tab选项卡切换效果
北斗星的爱886的博客
08-18 1229
JavaScript 实现tab选项卡切换效果 CSS： * { padding: 0px; margin: 0px; box-sizing: border-box; } .main { border: 1px solid #ccc; width: 440px; height: auto; margin: 0 auto; } .top { width: 440px; height: 45px; } .top li { float: left; wid
touch 移动端web手势滑动完成轮播图切换效果
12-16
touch 移动端web手势滑动完成轮播图切换效果，此效果仅仅展示了touch功能的冰山一角，更多功能还需要朋友们努力挖掘。
Hammer.js+轮播原理实现简洁的滑屏功能
11-22
最近有个任务，做一个非常小的h5的应用，只有2屏，需要做横向的全屏滑动切换和一些简单的动画效果，之前做这种东西用的是fullpage.js和jquery，性能不是很好，于是就想自己动手弄一个简单的东西来实现。最后我用zepto + hammer.js 和轮播的方式解决了这个问题，效果还不错，整个页面不开启Gzip时所有资源请求的数据大小为200KB左右。这篇文章总结下这个方法的实现思路。 效果演示： 1. 实现要点 1）滑屏借鉴bootstrap的carousel插件，不过完全没有它那个复杂，只需要借鉴它的轮播实现思路即可； 2）滑屏切换的触发，跟PC不一样，PC通常都是通过元素的
移动WEB-使用hammer.js实现滑动门（carousel ）
weixin_30642869的博客
04-11 144
1.首先需要引入jQuery文件和hammerJS的插件： http://www.bootcdn.cn/jquery/ 2.文档结构设计 <div id="carousel"> <ul> <li class="panel1"> <h2>左滑下一页&l...
hammer.js 手势操作
02-27 1343
官网网址：http://hammerjs.github.io/ 官网示例：http://hammerjs.github.io/api/    http://hammerjs.github.io/examples/ 主要两种使用方法： 1.直接简单使用 var myElement = document.getElementById('myElement'); var mc = ne
js常用插件(二)之移动端手势利器hammer单双指操作
小龚的博客
01-13 3540
js常用插件之hammer单双指操作 欢迎点击: 个人官网博客 移动端手势利器： 先引用cdn或自己下载下来 <script src="https://cdn.bootcdn.net/ajax/libs/hammer.js/2.0.8/hammer.js"></script> 使用方法 //要操作的元素 var hammertime= new Hammer(document.getElementById('test')); //直接调用就可以 //比如写了pan就
hammer.js触摸,手指缩放等许多手势操作
weixin_30892987的博客
10-19 776
使用方法： 插件描述：Hammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。 <script src="http://eightmedia.github.com/hammer.js/hammer.js"></script> // 先要对监听的DOM进行一些初始化 var hammer = new...
web及h5上下翻页功能
a_115098的博客
03-08 1877
实现上下翻页效果可以使用轮播图辅助实现，这里使用element-ui，其它插件使用方法类同。 html代码： //:autoplay="false"不自动播放 :loop="false"不循环 direction="vertical"轮播为数值方向 <el-carousel ref="goupdown" height="100%" direction="vertical" :autoplay="false" :loop="false"> <el-carousel-it
Hammer.js
weixin_34015860的博客
01-22 295
一、前言 移动端框架当前还处在初级阶段，但相对于移动端的应用来说已经有很长时间了。虽然暂时还没有PC端开发的需求量大，但移动端的Web必然是一种趋势，在接触移动端脚本的过程中，最开始想到的是juqery。Jquery2.0版本及以上已经开始偏向移动端，如对h5的支持，但支持还是不够完善，希望jq在后面的版本能够逐渐支持起来。 最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js...
vue2使用hammer.js实现移动端div拖拽放大缩小旋转
09-08
在Vue2中使用Hammer.js实现移动端div的拖拽、放大缩小和旋转可以按照以下步骤进行。 首先，在Vue项目中安装Hammer.js。 ``` npm install hammerjs ``` 然后，在需要使用拖拽、放大缩小和旋转功能的组件中引入Hammer.js，并初始化一个Hammer实例，将其绑定到要拖拽、放大缩小和旋转的div元素上。 ``` import Hammer from 'hammerjs' export default { mounted() { const element = this.$refs.element // 获取div元素的引用 const mc = new Hammer.Manager(element) // 初始化Hammer实例并将其绑定到div元素上 // 添加拖拽、放大缩小和旋转的手势识别 mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 })) mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith(mc.get('pan')) mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan')) // 初始化div元素的拖拽、放大缩小和旋转的初始状态值 let posX = 0 let posY = 0 let scale = 1 let lastScale = 1 let rotation = 0 // 监听拖拽事件 mc.on('pan', (e) => { // 实现拖拽 posX = e.deltaX posY = e.deltaY element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) // 监听放大缩小事件 mc.on('pinch', (e) => { // 实现放大缩小 scale = lastScale * e.scale element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) // 监听旋转事件 mc.on('rotate', (e) => { // 实现旋转 rotation = e.rotation element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) } } ``` 最后，在该组件的模板中添加一个div元素，并给其添加初始样式。 ``` <template> <div ref="element" style="width: 200px; height: 200px; background-color: red;"></div> </template> ``` 这样，当你在移动端上访问这个页面时，就可以拖拽、放大缩小和旋转这个div元素了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值