<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
*{margin: 0; padding: 0;}
#wrap{
position: absolute;
top:0;
left: 0;
}
section{
position: relative;
}
.arrow{
position:absolute;
}
#top_to_center,#center_to_top,#center_to_bottom,#bottom_to_center{
left: 50%;
}
#left_to_center,#center_to_left,#center_to_right,#right_to_center{
top:50%;
}
#top_to_center,#center_to_bottom{
bottom: 0;
}
#center_to_top,#bottom_to_center{
top:0;
}
#left_to_center,#center_to_right{
right: 0;
}
#center_to_left,#right_to_center{
left: 0;
}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
var ww = $(window).width();
var wh = $(window).height();
var bg = ['gold','lightblue','pink','olive','orange'];
$('#wrap').css({
width:ww*3,
height:wh*3,
backgroundColor:'lightgray',
top:-wh,
left:-ww,
});
$('section').css({
width:ww,
height:wh,
backgroundColor:function(index){
return bg[index];
}
});
$('#middle_wrap').css({
width:ww*3,
height:wh,
backgroundColor:'gray'
});
$('#middle_wrap>section').css({
float:'left'
});
$('#top_wrap,#bottom_wrap').css({
left:ww
});
$('.arrow').css({
width:ww*0.1,
height:ww*0.1,
backgroundColor:'#000',
color:'#fff',
textAlign:'center',
lineHeight:ww*0.1+'px',
});
$('#top_to_center,#center_to_top,#center_to_bottom,#bottom_to_center').css({
marginLeft:-(ww*0.1)/2
});
$('#left_to_center,#center_to_left,#center_to_right,#right_to_center').css({
marginTop:-(ww*0.1)/2
});
function wrapMove(elem, tMove, lMove){
$(elem).click(function(){
$('#wrap').animate({
top:tMove,
left:lMove,
});
});
}
wrapMove('#center_to_top', 0, -ww);
/*wrapMove('#top_to_center', -wh, -ww);*/
wrapMove('#center_to_bottom', -wh*2, -ww);
/*wrapMove('#bottom_to_center', -wh, -ww);*/
wrapMove('#center_to_left', -wh, 0);
/*wrapMove('#left_to_center', -wh, -ww);*/
wrapMove('#center_to_right', -wh, -ww*2);
/*wrapMove('#right_to_center', -wh, -ww);*/
wrapMove('#right_to_center,#top_to_center,#bottom_to_center,#left_to_center', -wh, -ww);
});//end
</script>
</head>
<body>
<div id="wrap">
<section id="top_wrap">
<h1 class="arrow" id="top_to_center">아래</h1>
</section>
<div id="middle_wrap">
<section>
<h1 class="arrow" id="left_to_center">오른</h1>
</section>
<section>
<h1 class="arrow" id="center_to_top">위로</h1>
<h1 class="arrow" id="center_to_left">왼쪽</h1>
<h1 class="arrow" id="center_to_bottom">아래</h1>
<h1 class="arrow" id="center_to_right">오른쪽</h1>
</section>
<section>
<h1 class="arrow" id="right_to_center">왼쪽</h1>
</section>
</div>
<section id="bottom_wrap">
<h1 class="arrow" id="bottom_to_center">위로</h1>
</section>
</div>
</body>
</html>
코딩 기록 블로그