HTML5移动端touch滑动与重力/方向感应结合代码,Css代码库,德仔网

代码语言
代码分类
【Css】 HTML5移动端touch滑动与重力/方向感应结合
作者: / 发布于2017/3/28/ 698
引用了jQuery、shake.js插件 shake.js ： https://github.com/alexgibson/shake.js/blob/master/shake.js 图片尺寸1920 * 3000 px
<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>HTML5移动端touch滑动与重力/方向感应结合</title>  
<style type="text/css">  
*{ margin:0; padding:0;}  
html , body{ display:block; width:100%; max-width:640px; min-width:320px; margin:0 auto; height:100%;}  
  
.box{ width:100%; height:100%; overflow:hidden; -webkit-overflow-scrolling:touch;}  
  
.box_box{ width:300%; position:relative;}  
.box_box img{ width:100%;}  
.box_msg1 , .box_msg2 , .box_msg3 , .box_msg4 , .box_msg5 , .box_msg6{ display:block; width:60px; height:60px; line-height:60px; text-align:center; font-size:10px; border-radius:50%; position:absolute; left:350px; top:550px; background-color:#d00; color:#fff; cursor:pointer;  
         -webkit-animation:box_msg 2s .2s infinite; animation:box_msg 2s .2s infinite;  
}  
.box_msg2{ left:900px; top:900px;}  
.box_msg3{ left:600px; top:800px;}  
.box_msg4{ left:500px; top:1000px;}  
.box_msg5{ left:700px; top:1100px;}  
.box_msg6{ left:800px; top:1200px;}  
@-webkit-keyframes box_msg{  
    0% , 100%{ -webkit-transform:scale(1); opacity:1;}  
    50%{ -webkit-transform:scale(0.9); opacity:.8;}  
}  
@keyframes box_msg{  
    0% , 100%{ transform:scale(1); opacity:1;}  
    50%{ transform:scale(0.9); opacity:.8;}  
}  
</style>  
<script src="jquery2.1.js"></script>  
<script src="shake.js"></script>  
</head>  
  
<body>  
<div class="box">  
    <div class="box_box">  
        <img src="cs.jpg" />  
        <div class="box_msg1" data-text="再接再厉">点我有惊喜~</div>  
        <div class="box_msg2" data-text="恭喜你，获得XXXX">点我有惊喜~</div>  
        <div class="box_msg3" data-text="再接再厉">点我有惊喜~</div>  
        <div class="box_msg4" data-text="再接再厉">点我有惊喜~</div>  
        <div class="box_msg5" data-text="再接再厉">点我有惊喜~</div>  
        <div class="box_msg6" data-text="再接再厉">点我有惊喜~</div>  
    </div>  
</div>  
  
  
</body>  
</html>  
<script>  
window.onload = function() {  
    var demo = $('.box_box');  
    var demoW = demo.width();  
    var demoH = demo.height();  
    var winW = $(window).width();  
    var winH = $(window).height();  
    var spacing_l = demoW - winW;  
    var spacing_t = demoH - winH;  
    var x_bl;  
    var y_bl;  
    //手机感应动作  
    var myShakeEvent = new Shake({  
        threshold:0.3,  
         timeout:0  
    });  
    myShakeEvent.start();  
    window.addEventListener('shake', shakeEventDidOccur, false);  
    function shakeEventDidOccur () {  
        deal_with(myShakeEvent.lastX , myShakeEvent.lastY , false);  
    }  
      
    //滑动动作  
    document.body.addEventListener("touchstart", touchStart, false);  
    document.body.addEventListener("touchmove", touchMove, false);  
    document.body.addEventListener("touchend", touchEnd, false);  
    function touchStart(e){  
        var touch = e.touches[0];  
        startX = touch.pageX;  
        startY = touch.pageY;  
        window.removeEventListener('shake', shakeEventDidOccur, false);  
    }  
    function touchMove(e){  
        e.preventDefault();  
        var touch = e.touches[0];  
        endX = touch.pageX;  
        endY = touch.pageY;  
        deal_with(startX - endX , endY - startY , true);  
    }  
    function touchEnd(e){  
        setTimeout(function(){  
            window.addEventListener('shake', shakeEventDidOccur, false);  
        },500)  
    }  
      
    //到达指定位置  
    function deal_with(left_num , top_num , if_touch){  
        if(if_touch){  
            x_bl = 0.1;  
            y_bl = 0.1;  
        }else{  
            x_bl = 5;  
            y_bl = 5;  
        }  
//      var demo_l = parseFloat(demo.css("margin-left"));  
//      var demo_t = parseFloat(demo.css("margin-top"));  
        var demo_l = demo.offset().left;  
        var demo_t = demo.offset().top;  
          
        if(demo_l <= 0 && demo_l >= -spacing_l){  
            var l_num = Math.abs(left_num) * x_bl;  
            if(left_num > 0){  
                l_num = demo_l - l_num;  
            }else{  
                l_num = demo_l + l_num;  
            }  
            if(l_num > 0){  
                l_num = 0;  
            }  
            if(l_num < -spacing_l){  
                l_num = -spacing_l;  
            }  
            //demo.css({"margin-left":l_num});  
            demo_translate3d();  
        }  
        if(demo_t <= 0 && demo_t >= -spacing_t){  
            var t_num = Math.abs(top_num) * y_bl;  
            //手机感应动作  只设置横向感应，手指动作，上下左右都能滑动  
            if(!if_touch){  
                t_num = demo_t;  
            }else{  
                if(top_num > 0){  
                    t_num = demo_t + t_num;  
                }else{  
                    t_num = demo_t - t_num;  
                }  
                if(t_num > 0){  
                    t_num = 0;  
                }  
                if(t_num < -spacing_t){  
                    t_num = -spacing_t;  
                }  
            }  
            //demo.css({"margin-top":t_num});  
            demo_translate3d();  
        }  
        function demo_translate3d(){  
            var trans = "translate3d(" + l_num + "px," + t_num + "px,0)";  
            demo.css({  
                "-webkit-transition":"0ms",  
                "-webkit-transform":trans,  
                "transition":"0ms",  
                "transform":trans  
            });  
        }  
    }  
      
      
      
};  
  
$(".box_msg1 , .box_msg2 , .box_msg3 , .box_msg4 , .box_msg5 , .box_msg6").click(function(){  
    alert($(this).attr("data-text"));  
});  
</script>
试试其它关键字
同语言下
可能有用的
贡献的其它代码Label