<!DOCTYPE html>
<html>
<head>
<title>배경 넣기</title>
<meta charset="utf-8">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/mini.js"></script>
<style>
body { background:#ddd; padding:10px; }
.box { width:100%; background:white; height:700px; }
#btn1, #btn2 { position:fixed; top:10%; right:0; }
#btn1 span { display:block; padding:10px; background:#666;
color:white; font-weight:bold; cursor:pointer;
margin-bottom:5px; opacity:0.1; width:70px; z-index:99; }
#btn2 span { display:block; padding:10px; background:#666;
color:white; font-weight:bold; cursor:pointer;
margin-bottom:5px; width:70px; z-index:1; }
#btn1 span:hover { background:#f60; }
#top { background:white;
background-size:contain; }
#pos1 { background:white; }
#pos2 { background:url('img/pic1.jpg') no-repeat center center;
background-size:contain; }
#pos3 { background:url('img/pic1.jpg') no-repeat center center;
background-size:contain; }
#pos4 { background:url('img/pic1.jpg') no-repeat center center;
background-size:contain; }
#pos5 { background:url('img/pic1.jpg') no-repeat center center;
background-size:contain; }
#pos6 { background:url('img/pic1.jpg') no-repeat center center;
background-size:contain; }
#wrap{text-align:left;margin:0 auto;height:1000px;}
#slidebar{position:absolute;cursor:pointer; left:10px;
background:orange; color:black; }
</style>
</head>
<body>
<div id="btn2">
<span>홈으로</span>
<span>캠핑예약</span>
<span>주변시설</span>
<span>관광안내</span>
<span>부대시설</span>
<span>복지시설</span>
<span>오시는길</span>
</div>
<div id="btn1">
<span>top</span>
<span>pos1</span>
<span>pos2</span>
<span>pos3</span>
<span>pos4</span>
<span>pos5</span>
<span>pos6</span>
</div>
<div class="box" id="top">top
<table border=0px width=100% >
<tr>
<td colspan=3>
<div style="width:100%; height:200px;
background:url('img/camp_door.png');
background-size:cover;
border-radius:20px; ">
<h5 style="color:white; ">서울대공원 캠핑장</h5>
</div>
</td>
</tr>
<tr height=100px>
<td>
<ul style="list-style:none; ">
<li>서울에서 가장 가까운 장소</li>
<li>서울에서 가장 가까운 장소</li>
<li>서울에서 가장 가까운 장소</li>
</ul>
</td>
<td>
<ul style="list-style:none; ">
<li>서울에서 가장 가까운 장소</li>
<li>서울에서 가장 가까운 장소</li>
<li>서울에서 가장 가까운 장소</li>
</ul>
</td>
<td>
<ul style="list-style:none; ">
<li>서울에서 가장 가까운 장소</li>
<li>서울에서 가장 가까운 장소</li>
<li>서울에서 가장 가까운 장소</li>
</ul>
</td>
</tr>
<tr>
<td colspan=3>
<img src="img/camp_map.png" width=100% height=250px >
</td>
</tr>
</table>
</div>
<div class="box" id="pos1">pos1<p>
<div>
<select >
<option>코스선택</option>
<option>A 코스</option>
<option>B 코스</option>
<option>C 코스</option>
</select>
<label for="people">인원수</label>
<input type="text" size=3 id="people">
</div>
<p>
<label for="all-check">확인사항</label>
<input type="checkbox" id="all-check"/>
<br>
<div id="check-item">
<label for="a">불판</label>
<input type="checkbox" id="a" />
<label for="b">전등</label>
<input type="checkbox" id="b" />
<label for="c">텐트</label>
<input type="checkbox" id="c" />
<label for="d">의자</label>
<input type="checkbox" id="d" />
<label for="e">주방용품</label>
<input type="checkbox" id="e" />
</div>
</div>
<div class="box" id="pos2">pos2
</div>
<div class="box" id="pos3">pos3
</div>
<div class="box" id="pos4">pos4
</div>
<div class="box" id="pos5">pos5
</div>
<div class="box" id="pos6">pos6
</div>
<div class="box">POS2
<div id="wrap"></div>
<div id="slidebar"><span id="txt">맨 아래로</span></div>
</div>
</body>
</html>
//----------------------------------------------------
window.xxxxonload=function()
{
var pop1=window.open("pop1.html", "", "width=600, height=300");
pop1.moveTo(300, 300);
}
$(function()
{
$("body").animate( { scrollTop:0}, 1000);
$("#btn1 span").click( function()
{
var aa=$("#" + $(this).text()).position().top;
$("body").stop().animate( {"scrollTop":aa}, 500);
});
//***************************
var cpos = $(window).height()/2 - $("#slidebar").height()/2;
$("#slidebar").css('top', cpos);
$('#txt').click(function()
{
$('body').animate({scrollTop:$(document).height()}, 'slow');
});
$(window).scroll(function()
{
var position = cpos + $(window).scrollTop() ; //레이어의 세로 위치
$("#slidebar").stop().animate({"top":position+"px"}, 1000);
if(position < $(document).height()/2) $("#slidebar").html('<span id="txt">맨 아래로</span>');
else $("#slidebar").html('<span id="totop">맨 위로</span>');
$('#totop').click(function()
{
$('body').animate({scrollTop:0}, 'slow');
});
$('#txt').click(function()
{
$('body').animate({scrollTop:$(document).height()}, 'slow');
});
});
});