[jquery] 디바이스 정보를 기준으로 한 swipe


<!doctype html>
<html lang="kr">
 <head>
	<meta charset="UTF-8" />                                                                                                   
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
	<title>Document</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
	<script type="text/javascript">
		var device_width = 0;	//접속 디바이스 width값을 저장하는 변수
		var device_height = 0;	//접속 디바이스 height값을 저장하는 변수
		var width_position = 0;
		var height_position = 0;
		var tmpScrollTop_Y = 0;

		//디바이스 사이즈를 구해서 변수에 저장
		function device_size(){
			 device_width = viewportSize().width;
			 device_height = viewportSize().height;
			 tmpScrollTop_Y = device_height * 4;
		}

		function viewportSize(){
			var size_div = document.createElement( "div" );
		 
			size_div.style.cssText = "position:fixed;top:0;left:0;bottom:0;right:0;";
			document.documentElement.insertBefore(size_div, document.documentElement.firstChild );
		 
			var size_res = {width:size_div.offsetWidth, height:size_div.offsetHeight };
			document.documentElement.removeChild(size_div);
		 
			return size_res;
		}
                /* swipeup */
		$('.slide_box').on('swipeup',function(){
			if($(".slide_box > div:first-child").css("top") != "0px"){
				$('.slide_box .school_layout div').parents('.school_layout').animate({"top":'-='+device_height+''},"500");
			}else{
				return;
			}
		});
		
		
		/* swipedown */
		$('.slide_box').on('swipedown',function(){
			if($(".slide_box > div:first-child").css("top") != tmpScrollTop_Y + "px"){
				$('.slide_box .school_layout div').parents('.school_layout').animate({"top":'+='+device_height+''},"500");
			}else{
				return;
			}
		});
		
		/* swipeleft */
		$('.slide_box').on('swipeleft',function(){
			if($(".slide_box > div:last-child").css("left") != "0px"){
				$('.slide_box .school_layout').animate({"left":'-='+device_width+''},"500");
			}else{
				return;
			}
		});

		/* swiperight */
		$('.slide_box').on('swiperight',function(){
			if($(".slide_box > div:first-child").css("left") != "0px"){
				$('.slide_box .school_layout').animate({"left":'+='+device_width+''},"500");
			}else{
				return;
			}
		});

		function drawDiv(){
			var str = '';

			for(var i=0; i < 5; i++ ){
				str += '<div style="position:absolute;top:0px;left:'+width_position+'px;width:100%;">';
				width_position += device_width;

				height_position -= device_height;
				pasteTxt += '<div style="position:absolute;top:'+height_position+'px;left:0;width:100%;">';
			}

			$('#divName').html(str);
		}

	</script>
 </head>
 <body>
  
 </body>
</html>
티스토리툴바
