移动端JQ插件hammer使用详解

来源：互联网发布：淘宝一元抢拍是真的吗编辑：程序博客网时间：2024/05/15 23:52

移动端JQ插件hammer使用详解

**
用法：

1,首先引入jq2.0以上版本和jquery.hammer.js.

2,获取元素,和jq一样，在后面加上hammer就可以了 var hammertime = $('.tabsa').hammer();

3,可以直接用on直接添加事件
hammertime.on(‘tap’, function(ev) {}) 这样用了hammer中的tap点击事件。function里可以写自己的js。

hammer.dragstart = function(ev) { };// 开始拖动</span>hammer.drag = function(ev) { }; // 拖动中</span>hammer.dragend = function(ev) { }; // 拖动结束</span>hammer.onswipe = function(ev) { }; // 滑动</span>hammer.tap = function(ev) { }; // 单击</span>hammer.doubletap = function(ev) { }; //双击</span>hammer.hold = function(ev) { };// 长按</span>hammer.release = function(ev) { }; // 手指离开屏幕</span>

用例1：

$(function() {　　var hammertime = $('.tabs a').hammer();　　hammertime.on('tap', function(ev) {　　　　$(this).addClass('actives').siblings().removeClass('actives');//添加一个class 同辈级移除。　　　　var index = $('.tabs a').index(this); //索引　　　　$('.tab-bott').eq(index).show().siblings().hide(); 　　})})

用例2

 <body>31     <div id="test" class="test">事件区域</div>32     <div id="result" class="result">事件结果：点击触发<br /></div>33     <script type="text/javascript">34         //创建一个新的hammer对象并且在初始化时指定要处理的dom元素35         var hammertime = new Hammer(document.getElementById("test"));36         //添加事件37         hammertime.on("tap", function (e) {38             document.getElementById("result").innerHTML += "点击触发了，长按无效<br />";39             //控制台输出40             console.log(e);41         });42     </script>43 </body>

用例3

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Bootstrap 实例 - 轮播（Carousel）插件方法</title>    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>    <script src="js/jquery.js" type="text/javascript"></script>    <script src="js/hammer.min.js" type="text/javascript"></script>    <script src="js/hammer.js" type="text/javascript"></script></head><body><div id="myCarousel" class="carousel slide">    <!-- 轮播（Carousel）指标 -->    <ol class="carousel-indicators">        <li data-target="#myCarousel" data-slide-to="0"            class="active"></li>        <li data-target="#myCarousel" data-slide-to="1"></li>        <li data-target="#myCarousel" data-slide-to="2"></li>    </ol>    <!-- 轮播（Carousel）项目 -->    <div class="carousel-inner">        <div class="item active">            <img src="images/1.jpg" alt="First slide">        </div>        <div class="item">            <img src="images/2.jpg" alt="Second slide">        </div>        <div class="item">            <img src="images/3.jpg" alt="Third slide">        </div>    </div>    <!-- 轮播（Carousel）导航 -->    <a class="carousel-control left" href="#myCarousel"       data-slide="prev">&lsaquo;</a>    <a class="carousel-control right" href="#myCarousel"       data-slide="next">&rsaquo;</a>    <!-- 控制按钮 -->    <div style="text-align:center;">        <input type="button" class="btn start-slide" value="Start">        <input type="button" class="btn pause-slide" value="Pause">        <input type="button" class="btn prev-slide" value="Previous Slide">        <input type="button" class="btn next-slide" value="Next Slide">        <input type="button" class="btn slide-one" value="Slide 1">        <input type="button" class="btn slide-two" value="Slide 2">        <input type="button" class="btn slide-three" value="Slide 3">    </div></div><script>    $(function(){        // 初始化轮播        $(".start-slide").click(function(){            $("#myCarousel").carousel('cycle');        });        // 停止轮播        $(".pause-slide").click(function(){            $("#myCarousel").carousel('pause');        });        // 循环轮播到上一个项目        $(".prev-slide").click(function(){            $("#myCarousel").carousel('prev');        });        // 循环轮播到下一个项目        $(".next-slide").click(function(){            $("#myCarousel").carousel('next');        });        // 循环轮播到某个特定的帧        $(".slide-one").click(function(){            $("#myCarousel").carousel(0);        });        $(".slide-two").click(function(){            $("#myCarousel").carousel(1);        });        $(".slide-three").click(function(){            $("#myCarousel").carousel(2);        });        var hammertime = new Hammer(document.getElementById("myCarousel"));              //添加事件                hammertime.on("swipeleft", function () {                   /*alert('1');*/                    $(this).carousel('next');               });        hammertime.on("swiperight", function () {            /*alert('2');*/            $(this).carousel('next');        });    });</script></body></html>

0 0