hammer.js实现移动端的拖放效果

hammer.js可以实现移动端的多种触摸效果。详细可以点击http://www.cnblogs.com/iamlilinfeng/p/4239957.html

不过发现hammer.js实现功能时,只能是原生js,jquery代码在hammer中不起效果。

一、引入hammer.js

下载http://hammerjs.github.io/

<script type="text/javascript" src="js/hammer.min.js"></script>

二、创建(触屏点击效果)

//点击游戏引导的X关闭引导

new Hammer(document.getElementById("game_guide_close")).on("tap",function(){

var pop = document.getElementById("pop");

document.getElementById("game_bg").removeChild(pop);

});

时间: 2024-10-27 11:29:32

hammer.js实现移动端的拖放效果的相关文章

使用touch-punch.js实现移动端的拖放效果

一.下载文件并引入 下载地址:http://touchpunch.furf.com/ 引入: <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.min.js"></script> 这里可以查看参数http://www.cnblogs.com/ganqiyin/archive/2013/12/12/34716

Hammer.js移动端触屏框架的使用

hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: 1 2 3 4 5 6 7 8

移动端手势事件 hammer.JS插件

一.引入hammer.JS 1.下载地址:http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址:http://hammerjs.github.io/examples/ 3.CDN链接:http://hammerjs.github.io/dist/hammer.min.js 二.用法 1.首先我们先写一个出发事件的DOM元素 HTML: <style type="text/css"> html, body { wid

利用轮播原理结合hammer.js实现简洁的滑屏功能

最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西来实现.最后我用zepto + hammer.js 和轮播的方式解决了这个问题,效果还不错,整个页面不开启Gzip时所有资源请求的数据大小为200KB左右.这篇文章总结下这个方法的实现思路. 效果演示(代码下载): 1. 实现要点 1)滑屏借鉴bootstrap的carousel插件,不过完全没有它

Hammer.js

一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqery.Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希望jq在后面的版本能够逐渐支持起来. 最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js开发,但相对来说开发量比较大,而且每一步都要考虑各移动端浏览器的兼容,像比较让程序员头痛的大wp手机,很多事

hammer.js初探

最近觉得自己的进步比较慢了,很有可能是因为中文区的学习和百度的使用极大的限制了自己的视野,所以,以后无论是新技术的学习,还是问题的解决,做到以下几点: 新技术的学习必须通过英文文档,而不是翻译过来的蹩脚的中文文档. 问题的搜寻通过google.通过stackoverflow,如果在知道其局限性的情况下再去百度或者其他方法. 遇到有问题的词汇就通过Google翻译搜寻,但实际上这时候通过百度也是可以的,因为百度知道的存在也是有用的. 嗯,第一个完整的英文文档就从hammer.js开始吧! 加油.

hammer.js的六大事件

1.Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在触屏开发中比较常用: Panstart 拖动开始 Panmove 拖动过程 Panend 拖动结束 Pancancel 拖动取消 Panleft 向左拖动 Panright 向右拖动 Panup 向上拖动 Pandown 向下拖动 2.Pinch事件: 在指定的dom区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时的事件: Pinstart 多

认识hammer.js

hammerjs是什么 hammerjs是一个短小精悍的库,他可以让我们轻松的实现移动端上的手势. hammerjs的两大优势如下: 为移动端网页添加相关手势. 去除移动端上的点击事件的300ms延迟. 为什么使用hammerjs 诚然,我们可以通过touch的四个事件等来完成相同的功能,但是不可避免的会比较麻烦,所以既然前人已经造了这个好轮子,为什么不去使用呢? 另外,300ms的延迟有时是我们不需要的,比如,我们在做webapp时,不需要页面的缩放,而300ms的延迟就是为了webapp的缩

Hammer.js分析(二)——manager.js

“Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性. manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会先做大致的流程分析,具体分析会在接下来的文章中详谈. 一.Manager构造函数 初始化流程如下所示: 对应的函数代码如下所示: function Manager(element, options) { this.options = assign({}, Hammer.defaults, optio