• 목록

• 페이스북 공유
• 트위터 공유

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script src="//jquery-ui-for-ipad-and-iphone.googlecode.com/files/jquery.ui.touch.js"></script> 

<style>

h2 { text-align:center; }

body>div { 

position:relative; margin:auto;width: 737px;height: 549px;

background:url(http://www.chuing.net/zboard/data/ililu/1331564477/%EC%88%B2.jpg);

}

body>div>div { 

position:absolute; 

width: 150px;

height: 150px;

border-width: 5px;

border-style: solid;

border-color: red;

-moz-border-radius: 200px;

-webkit-border-radius: 200px;

border-radius: 200px;

background-image:url(http://www.chuing.net/zboard/data/ililu/1331564477/%EC%88%B2.jpg);

background-position: center;

background-size: 1474px 1098px;

cursor:pointer;

left:269px;

top:175px

}

body>div>div>img { margin: -20px 0 0 -20px; }

</style>

<script>

$(document).ready(function(){ Z.init(); });

//돋보기 객체

var Z = {

obj : null, //돋보기

w : null, //돋보기 사이즈(px)

init : function(){

Z.obj = $("div>div");

Z.w = parseInt($(Z.obj).css("width"),10);

$(Z.obj).draggable({ 

containment: "parent",

stack: ".products",

drag: function() {

Z.resetView(this.style.left,this.style.top);

}

});

Z.resetView( $(Z.obj).css("left"), $(Z.obj).css("top") );

},

resetView : function(left, top){

console.log(left + top);

var L = (parseInt(left,10)*-2)-(Z.w/2);

var T = (parseInt(top,10)*-2)-(Z.w/2);

$(Z.obj).css("background-position",L+"px "+T+"px");

}

}

</script>

 <div><div><img src="img/zoom_tool.png" /></div></div> 

-------------------------------------------

[샘플보기]

-------------------------------------------

- 참고: 아래 링크는 제이쿼리를 사용한 방법 - 

jQuery.Image.Magnifier.min.js - [ 샘플 ]