HTML5移动端touch滑动与重力/方向感应结合

最新推荐文章于 2021-06-11 15:05:58 发布

羽筠

最新推荐文章于 2021-06-11 15:05:58 发布

阅读量4.7k

点赞数

分类专栏： HTML + CSS + JS

本文链接：https://blog.csdn.net/qq_16494241/article/details/50317915

版权

HTML + CSS + JS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

引用了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>