首页 > Web开发 > 详细

html5滑动手势

时间:2015-04-22 11:28:08      阅读:541      评论:0      收藏:0      [点我收藏+]
  <div id="divMove" style="height: 100px;"></div>
    <div id="slideDiv" style="width: 300px; height:30px;background-color:#AA967D;">
        左滑
        <button id="btnDelete" style="display: none;">删除</button>
    </div>
<script type="text/javascript">
        var touchGlobal;
        document.getElementById("slideDiv").addEventListener("touchstart",function(e){
            touchGlobal=e.touches[0];    
            
        },false);
        document.getElementById("slideDiv").addEventListener("touchmove",function(e){
            var touch=e.touches[0];
            var x=Number(touch.pageX);
            document.getElementById("divMove").innerHTML=x;
            if(touchGlobal.pageX-x>0){
                document.getElementById("btnDelete").setAttribute("style","display: inline");
            }
            else{
                document.getElementById("btnDelete").setAttribute("style","display: none");
            }
        },false);
        document.getElementById("slideDiv").addEventListener("touchend",function(e){            
        },false);
    </script>

 

html5滑动手势

原文:http://www.cnblogs.com/bygrace/p/4446579.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!