HTML5 jQuery绑定手机移动端触摸双击事件
2016-04-22 12:26:25  By: dwtedx

Demo是一款jQuery移动设备触摸检测事件的处理Demo、同时使用鼠标双击也是可以实现相同的功能的、Demo的代码非常简单、使用了doubleTap事件、是一款非常有用的鼠标双击事件或移动设备的触摸双击事件的检测插件、Demo的效果非常简单、事件发生之后更换了焦点区域的背景色、效果图如下

jquery移动端触摸事件


CSS代码

<style type="text/css">
    #doubleTap-test{
        width: 300px;
        height: 300px;
        background-color: #D5D6E2;
        margin: 50px auto;
        cursor: pointer;
        -webkit-transition: background-color 1s;
        -o-transition: background-color 1s;
        transition: background-color 1s;
    }
</style>


HTML代码

<div class="htmleaf-content">
    <h3 class="center">使用鼠标或手指双击下面的矩形区域查看效果:</h3>
    <div id="doubleTap-test"></div>
</div>


JS代码

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-doubleTap.js"></script>
<script type="text/javascript">
    var colors = ["#f5d76e","#3ec27f","#22a7f0","#d2527f","#1e824c","#bf55ec","#f64747","#e67e22","#4b77be","#be90d4"];
    $("#doubleTap-test").doubleTap(function() {
        var n = Math.floor(Math.random()*10);
        var color = colors[n]
        $("#doubleTap-test").css("background", color);
    });
    
</script>


html5手机端双击事件源代码下载链接: html5手机端双击事件源码 密码: 5vmq

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+