插件描述：Hammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。
=================以下内容由 Mr.li√ 提供===============
使用方法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 先要对监听的DOM进行一些初始化</span><span class="keyword" style="font-weight: bold;">var</span> hammer = <span class="keyword" style="font-weight: bold;">new</span> Hammer(document.getElementById(<span class="string" style="color: rgb(221, 17, 68);">"container"</span>));<span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 然后加入相应的回调函数即可</span>hammer.ondragstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 开始拖动</span>hammer.ondrag = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动中</span>hammer.ondragend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 拖动结束</span>hammer.onswipe = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 滑动</span>hammer.ontap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 单击</span>hammer.ondoubletap = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//双击</span>hammer.onhold = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 长按</span>hammer.ontransformstart = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张开始</span>hammer.ontransform = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张中</span>hammer.ontransformend = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 双指收张结束</span>hammer.onrelease = function(ev) { }; <span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">// 手指离开屏幕</span> |
还支持jQuery插件的形式调用
1 2 3 4 5 6 7 8 9 | <span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">script</span> <span class="attribute" style="color: rgb(0, 128, 128);">src</span>=<span class="value" style="color: rgb(221, 17, 68);">"/"</span>></span><span class="tag" style="color: rgb(0, 0, 128);"></<span class="title">script</span>></span>$("#element") .hammer({ // 对DOM进行一些初始化，这里可以加入一些参数 }) .bind("tap", function(ev) { console.log(ev); }); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 强调文字突出显示使用JavaScript
- 下一个特效： 时间表(考勤表)插件imesheet.js