css
<style type="text/css">
#mask {
position:absolute;
z-index:9000;
background-color:#fff;
display:none;
left:0;
top:0;
width:100%;
height:100%;
}
.window{
z-index:10000;
display: none;
position:absolute;
top:25%;
left:25%;
align-items:center;
justify-content:center;
-webkit-align-items:center;
-webkit-justify-content:center;
-webkit-box-pack:center;
-webkit-box-align:center;
-moz-box-pack:center;
-moz-box-align:center;
-ms-box-pack:center;
-ms-box-align:center;
}
.window .close{
float:right;
}
.imgSelect {
display:none;
}
.openMask:hover{
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
.imgSelectDiv {
position: relative;
}
#zoomImg{
cursor : move;
z-index : 1;
}
</style>
html
<div id="mask"></div>
<div class="window">
<a href="#" class="close"><img src="/images/select.png">
</a>
<img id="zoomImg" src="http://imagecomposer.fluidretail.net/generate/?view=Back&recipe=2%2C13%2C0%2C1%2C1%2C-1%2C-1%2C0%2C2%2C-1%2C-1%2C-1%2C0%2C-1%2C0%2C1%2C0%2C-1%2C-1%2C0%2C14&workflow=prod&environment=prod&customerId=1479&productId=20900&configVersion=1467931264373&publishedTime=07%2F07%2F2016%2022%3A41%3A04&purpose=serverDisplay&format=png&trim=false&padding=0&scale=1&binary=true" >
</div>
<div class="imgDisplay">
<div style="position: absolute;">
<div class="imgSelectDiv">
<a href="#"><img src="/images/select.png" class="imgSelect" /></a>
</div>
</div>
<a href="#" class="openMask"><img src="http://braverokmc.dothome.co.kr/include/images/beautiful/77.jpg" ></a>
</div>
javacsript
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function wrapWindowByMask(){
//화면의 높이와 너비를 구한다.
var maskHeight = $(document).height();
var maskWidth = $(window).width();
var imgWidth =(maskWidth/10)*9;
var imgHeight=(maskHeight/10)*9;
var imageWidthmargin=(maskWidth-imgWidth)/2;
var imageHeightmargin=(maskHeight-imgHeight)/2;
//alert("maskHeight : "+ maskHeight+ "imgHeight : " +imgHeight + ", imageHeightmargin: " + imageHeightmargin);
imgHeight='100%';
//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
$('#mask').css({'width':maskWidth,'height':maskHeight});
//애니메이션 효과 - 일단 1초동안 까맣게 됐다가 80% 불투명도로 간다.
$('#mask').fadeIn(10);
$('#mask').fadeTo("slow",0.5);
//이미지 사이즈 조절
$('.window').css('left', '0px');
$('.window').css('margin-left', imageWidthmargin+'px');
imageHeightmargin =-imageHeightmargin -100;
$('.window').css('margin-top', imageHeightmargin+'px');
$('.window >img').css({'width':imgWidth,'height':imgHeight});
//윈도우 같은 거 띄운다.
$('.window').show();
}
$(document).ready(function(){
//검은 막 띄우기
$('.openMask').click(function(e){
e.preventDefault();
wrapWindowByMask();
});
//닫기 버튼을 눌렀을 때
$('.window .close').click(function (e) {
//링크 기본동작은 작동하지 않도록 한다.
e.preventDefault();
$('#mask, .window').hide();
});
//검은 막을 눌렀을 때
/* $('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
*/
// 터치 스크린에서 실수로 레이어를 닫는 경우를 막으려면.
$('#mask').one('touchstart', function () {
$(this).unbind('click');
// alert('터치 이벤트일 때는 아무 일도 안 일어난다.');
});
$(".openMask img").mouseover(function(){
var imgW=$(".openMask img").width();
var imgH=$(".openMask img").height();
$(".imgSelectDiv").css("top", (imgH/2-40)+'px');
$(".imgSelectDiv").css("left", (imgW/2-40)+'px');
if($(".imgSelect").css("display") == "none"){
$(".imgSelect").show();
}
});
$(".imgDisplay").mouseout(function(){
if($(".imgSelect").css("display") != "none"){
$(".imgSelect").hide();
}
});
$("#zoomImg").draggable();
/*
$('#zoomImg').dblclick(function(event){
// $('img').bind('dblclick', function(event){
var $target = $(this); // $(event.target);
$target.width($target.width()+100); // 나누기는 축소
$target.height($target.height()+100);
}); */
});
</script>
댓글 ( 4)
댓글 남기기