<pre name="code" class="jscript">
<html lang="ko">
<head>
<title>싸니까 믿으니까 인터파크 투어</title>
<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">
<style>
.over-hidden {
overflow: hidden;
}
.over-auto {
overflow: auto;
}
.layer-container {
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
background-color: #fff;
opacity: 1;
width: 90%;
}
.back-layer {
position: absolute;
left: 0;
top: 0;
z-index: 99;
background-color: #000000;
width: 100%;
opacity: 0.5;
}
.newlayer-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 110;
background-color: #fff;
opacity: 1;
}
.newback-layer {
position: absolute;
left: 0;
top: 0;
z-index: 99;
background-color: #808080;
height: 100%;
width: 100%;
opacity: 1;
}
.playerlayer-container {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 120;
background-color: #fff;
opacity: 1;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
function ShowBackCenterLayerTest(cnt, top) {
var layerID = "center_" + cnt;
var makeHtml = "";
makeHtml += " <div id='" + layerID + "' class='layer-container'>";
for (var i = 0; i < cnt; i++) {
makeHtml += " <div> BackCenter컨텐츠_" + cnt + " </div>";
if ((i + 1) % 10 == 0) {
makeHtml += " <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
}
}
makeHtml += " <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
makeHtml += " </div>";
fnMakeLayer(layerID, "body", makeHtml);
fnShowCenterLayer(layerID, top, 500, "left", callback1);
}
function ShowBackTopLayerTest(cnt, top) {
var layerID = "BackTop_" + cnt;
var makeHtml = "";
makeHtml += " <div id='" + layerID + "' class='layer-container'>";
for (var i = 0; i < cnt; i++) {
makeHtml += " <div> BackTop컨텐츠_" + cnt + " </div>";
if ((i + 1) % 10 == 0) {
makeHtml += " <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
}
}
makeHtml += " <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
makeHtml += " </div>";
fnMakeLayer(layerID, "body", makeHtml);
fnShowTopLayer(layerID, top, 500, "left", callback1);
}
function ShowNewTopLayerTest(cnt, top) {
var layerID = "NewTop_" + cnt;
var makeHtml = "";
makeHtml += "<div id='" + layerID + "' class='newback-layer'>";
makeHtml += " <div class='newlayer-container'>";
for (var i = 0; i < cnt; i++) {
makeHtml += " <div> NewTop컨텐츠_" + cnt + " </div>";
if ((i + 1) % 10 == 0) {
makeHtml += " <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
}
}
makeHtml += " <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
makeHtml += " </div>";
makeHtml += "</div>";
fnMakeLayer(layerID, "body", makeHtml);
fnShowNewTopLayer(layerID, 500, "left", callback1);
}
function callback1() {
console.log("callback1");
}
</script>
<script type="text/javascript">
var _arrLayerID = []; // 리사이즈시 레이어를 제어하기위해 {layerID, topMargin, ShowType}
$(window).resize(function () {
setTimeout(function () {
LayerResize()
}, 30);
});
function LayerResize() {
for (var i = 0; i < _arrLayerID.length; i++) {
var jqueryObj = $("#" + _arrLayerID[i].layerID);
if (jqueryObj.css("display") != "none") {
if (_arrLayerID[i].ShowType == "fnShowCenter") {
fnShowCenterLayer(_arrLayerID[i].layerID, _arrLayerID[i].topMargin, 0);
}
else if (_arrLayerID[i].ShowType == "fnShowTop") {
fnShowTopLayer(_arrLayerID[i].layerID, _arrLayerID[i].topMargin, 0);
}
}
}
}
function fnMakeLayer(layerID, parentID, makeHtml) {
var layerSelecter = "#" + layerID;
if ($(layerSelecter).length > 0) {
return;
}
var parentSelecter = "";
if (parentID == null || parentID == "" || parentID == "body") {
parentSelecter = "body";
}
else {
parentSelecter = "#" + parentID;
}
$(parentSelecter).append(makeHtml);
}
function fnSetLayer(ID, top, div) {
var isAddAble = true;
for (var i = 0; i < _arrLayerID.length; i++) {
if (_arrLayerID[i].layerID == ID) {
isAddAble = false;
}
}
if (isAddAble) {
_arrLayerID.push({ layerID: ID, topMargin: top, ShowType: div });
}
}
function fnShowBackLayer(layerID, topMargin) {
var backID = layerID + "back";
if ($("#" + backID).length == 0) {
var addHtml = $("<div></div>").attr("id", backID).addClass("back-layer");
$("#divWrap").append(addHtml);
$("#" + backID).bind('touchmove', function (e) { e.preventDefault() });
}
var con_h = $("#" + layerID).height() + $(window).scrollTop() + topMargin;
var win_h = $(window).height();
if (con_h > win_h) {
$("#" + backID).height(con_h);
}
else {
$("#" + backID).height(win_h);
}
$("#" + backID).show();
}
function fnShowCenterLayer(layerID, topMargin, duration, slideType, callback) {
var layerSelecter = "#" + layerID;
$(layerSelecter).removeClass("over-auto");
$(layerSelecter).css("height", "auto");
if (topMargin == null || topMargin == "") {
topMargin = "0";
}
topMargin = Number(topMargin);
fnSetLayer(layerID, topMargin, "fnShowCenter");
//var win_w = $(window).width();
//var win_h = $(window).height();
var win_w = screen.width;
var win_h = screen.height;
var con_w = $(layerSelecter).width();
var con_h = $(layerSelecter).height();
var scrollTop = $(window).scrollTop();
var movetop = ((win_h - con_h) / 2);
var moveleft = (win_w - con_w) / 2;
if (movetop < 0) {
movetop = 0;
}
movetop += scrollTop + topMargin;
if (con_h + (topMargin * 2) > win_h) {
$(layerSelecter).css("height", win_h - (topMargin * 2));
}
$("body").css("overflow", "hidden");
$(layerSelecter).css("overflow", "auto");
$(layerSelecter).show();
fnShowBackLayer(layerID, topMargin);
$(layerSelecter).css("left", "100%").css("top", movetop);
$(layerSelecter).animate({
left: moveleft,
top: movetop
},
duration,
function () {
if (callback != null) {
callback();
}
});
}
function fnShowTopLayer(layerID, topMargin, duration, slideType, callback) {
var layerSelecter = "#" + layerID;
$(layerSelecter).css("height", "auto");
if (topMargin == null || topMargin == "") {
topMargin = "0";
}
topMargin = Number(topMargin);
fnSetLayer(layerID, topMargin, "fnShowTop");
var win_w = screen.width;
var win_h = screen.height;
var con_w = $(layerSelecter).width();
var con_h = $(layerSelecter).height();
var scrollTop = $(window).scrollTop();
var movetop = topMargin;
var moveleft = (win_w - con_w) / 2;
if (movetop < 0) {
movetop = 0;
}
movetop += scrollTop;
$(layerSelecter).show();
fnShowBackLayer(layerID, topMargin);
$(layerSelecter).css("left", "100%").css("top", movetop);
$(layerSelecter).animate({
left: moveleft,
top: movetop
},
duration,
function () {
if (callback != null) {
callback();
}
});
}
function fnShowNewTopLayer(layerID, duration, slideType, callback) {
var layerSelecter = "#" + layerID;
$("body").css("overflow", "hidden");
var scrollTop = $(window).scrollTop();
$(layerSelecter).css("overflow", "auto");
$(layerSelecter).css("left", "100%").css("top", scrollTop).show();
$(layerSelecter).animate({
left: 0,
top: scrollTop
},
duration,
function () {
if (callback != null) {
callback();
}
});
}
function fnCloseLayerAttr(obj) {
var layerID = $(obj).attr("data-close");
fnCloseLayer(layerID);
}
function fnCloseLayer(layerID) {
$("body").css("overflow", "auto");
$("#" + layerID + "back").hide();
$("#" + layerID).hide();
for (var i = 0; i < _arrLayerID.length; i++) {
if (_arrLayerID[i].layerID == layerID) {
_arrLayerID.splice(i, 1);
}
}
}
</script>
</head>
<body>
<div id="divWrap">
<div>줄바꿈<br /><br /></div>
<div>줄바꿈<br /><br /></div>
<div>줄바꿈<br /><br /></div>
<div>
<a href="javascript:ShowBackCenterLayerTest(5, 0);"> 레이어 센터(margintop 0) </a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowNewTopLayerTest(30, 0);"> 레이어 새창처럼 (margintop 0) </a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowBackCenterLayerTest(40, 20);"> 레이어 센터(margintop 20) </a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowBackCenterLayerTest(60, 80);"> 레이어 센터(margintop 80) </a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowBackCenterLayerTest(60, 0);"> 레이어 센터(margintop 0) </a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowBackTopLayerTest(10, 10);"> 레이어 Top (margintop 10) </a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowBackTopLayerTest(40, 20);"> 레이어 Top (margintop 20)</a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowBackTopLayerTest(60, 80);"> 레이어 Top (margintop 80)</a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowBackTopLayerTest(60, 0);"> 레이어 Top (margintop 0)</a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowNewTopLayerTest(30, 0);"> 레이어 새창처럼 (margintop 0) </a>
<br />
<br />
</div>
<div>
<a href="javascript:ShowNewTopLayerTest(60, 0);"> 레이어 새창처럼 </a>
<br />
<br />
</div>
<div>줄바꿈<br /><br /></div>
<div>줄바꿈<br /><br /></div>
<div>줄바꿈<br /><br /></div>
<div>줄바꿈<br /><br /></div>
<div>줄바꿈<br /><br /></div>
<div>줄바꿈<br /><br /></div>
<div>줄바꿈<br /><br /></div>
<div>줄바꿈<br /><br /></div>
</div>
</body>
</html>
</pre>
댓글 없음:
댓글 쓰기