• JS

(핸드폰) MOBILE 구글처럼 메뉴 드래그 했을때 나타나는 소스(ver0.1)

2018-12-14 284

동영상 예제

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	#test_wrap {position:relative; display:inline-block; width:100%; height:300px; background:#f2849e; overflow:hidden; font-size:26px; font-weight:400; color:#fff; box-sizing:border-box; padding:0 30px}
	#test_wrap:after {content:""; position:absolute; left:0; top:0; width:15px; height:100%; background:red}
	#test_wrap:before {content:""; position:absolute; right:0; top:0; width:15px; height:100%; background:red}
	.left_menu {position:absolute; left:-100%; top:0; width:100%; height:100%; background:#4fb99f; -moz-transition: left 0.2s ease; -webkit-transition: left 0.2s ease; -ms-transition: left 0.2s ease;  transition: left 0.2s ease; z-index:5;}
	.left_menu.on {left:0}
	.left_menu.wow {-moz-transition: left 0.05s ease; -webkit-transition: left 0.05s ease; -ms-transition: left 0.05s ease;  transition: left 0.05s ease;}
	.right_menu {position:absolute; right:-100%; top:0; width:100%; height:100%; background:#f2b134; -moz-transition: right 0.2s ease; -webkit-transition: right 0.2s ease; -ms-transition: right 0.2s ease;  transition: right 0.2s ease; z-index:5}
	.right_menu.on {right:0}
	.right_menu.wow {-moz-transition: right 0.05s ease; -webkit-transition: right 0.05s ease; -ms-transition: right 0.05s ease;  transition: right 0.05s ease;}
</style>

<div id="test_wrap">
	<div class="left_menu">
	</div>
	<div class="right_menu">
	</div>
</div>

<script type="text/javascript">
	function detectmob() { 
		if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i)  || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i)  || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ){
			
		} else {
			$("#test_wrap").text("모바일로 접속해 주세요!");
		}
	}
	detectmob();
	if(!navigator.userAgent.match(/iPhone/i)) {
		var box1 = document.getElementById('test_wrap');
		var box2 = parseInt($(".left_menu").css("width"));
		var box3 = parseInt($(".right_menu").css("width"));
		var left_menu = $(".left_menu");
		var right_menu = $(".right_menu");
		var startx = 0;
		var dist = 0;
		var wow_start = 0;
		var right_now = window.innerWidth;
		var restart = 0;
		window.addEventListener('load', function(){

			box1.addEventListener('touchstart', function(e){
				wow_start = 0;
				var touchobj = e.changedTouches[0]
				startx = parseInt(touchobj.clientX);
				if( touchobj.clientX < 30) {
					wow_start = 1;
				}

				if( touchobj.clientX > right_now - 30) {
					wow_start = 2;
				}
			}, false)

			box1.addEventListener('touchmove', function(e){
				var touchobj = e.changedTouches[0]
				dist = parseInt(touchobj.clientX) - startx;
				console.log(dist + "/" + wow_start);
				if(wow_start == 1) {
					if(right_menu.hasClass("on")) {
						wow = Math.abs(box3) + dist;
						wow2 = Math.abs(box3) - dist;
						dist = dist * 0.3;
						move = dist;
						right_menu.css({"right":"-" + move + "%"}).addClass("wow");
					} else {
						wow = Math.abs(box2) + dist;
						wow2 = Math.abs(box2) - dist;
						//console.log(wow + "/" + wow2);
						dist = dist * 0.3;
						move = 100 - dist;
						left_menu.css({"left":"-" + move + "%"}).addClass("wow");
					}
				} if(wow_start == 2) {
					if(left_menu.hasClass("on")) {
						wow = Math.abs(box2) + dist;
						wow2 = Math.abs(box2) - dist;
						//console.log(wow + "/" + wow2);
						dist = dist * 0.3;
						move = dist;
						left_menu.css({"left":move + "%"}).addClass("wow");
					} else {
						wow = Math.abs(box3) + dist;
						wow2 = Math.abs(box3) - dist;
						right_menu.css({"right":"-" + wow + "px"}).addClass("wow");
					}
				}
			}, false);

			box1.addEventListener('touchend', function(e){
				var touchobj = e.changedTouches[0];
				endx = parseInt(touchobj.clientX);
				totaltx = startx - endx;
				//console.log(touchobj.clientX + "/" +(right_now / 4) + "/" + totaltx);
				//console.log(wow_start);
				if(wow_start == 1) {
					if(right_menu.hasClass("on")) {
						if(touchobj.clientX > (right_now / 4)) {
							right_menu.css("right","").removeClass("on wow");
							restart = 0;
						} else {
							right_menu.css("right","").addClass("on").removeClass("wow");
						}
					} else {
						if(touchobj.clientX > (right_now / 4)) {
							left_menu.css("left","").addClass("on").removeClass("wow");
							restart = 1;
						} else {
							if(restart == 0) {
								left_menu.css("left","").removeClass("on wow");
							}
						}
					}
				} if(wow_start == 2) {
					if(left_menu.hasClass("on")) {
						if(totaltx > (right_now / 4)) {
							left_menu.css("left","").removeClass("on wow");
							restart = 0;

						} else {
							left_menu.css("left","").addClass("on").removeClass("wow");
						}
					} else {
						if(totaltx > (right_now / 4)) {
							right_menu.css("right","").addClass("on").removeClass("wow");
							restart = 1;
						} else {
							if(restart == 0) {
								right_menu.css("right","").removeClass("on wow");
							}
							
						}
					}
				}
			}, false);

		}, false);
	}
</script>