클릭시 이미지 확대 팝업
본문
이미지를 background-image로 넣었습니다
<div class="img x"></div>
확대 아이콘도 .x:before 로 넣었는데 아이콘을 누르면 이미지가 팝업으로 확대되고 싶습니다
**클래스는 예를 든거에요!
제이쿼리나 스크립트를 찾아봐도 영 감이 안잡힙니다....
저는 img 태그도 span을 따로 만들어서 하질않고 다 background-image로 넣기도했고,
:before 가상요소 선택자가 저게 맞는건지도 모르겠어서 도움 요청 합니다 ㅜㅜ
// 이미지 확대
$(function(){
$( '.x:before' ).click(function(){
$( '.img' ).clearQueue().animate({height:300,width:800,left:200,top:100})
});
});
답변 1
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>이벤트 객체</title>
<style>
img{ width:140px; height:120px; }
</style>
<script src="../js/jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
var abc=0;
$(function() {
$('img').bind('click', function(event){ //one은 한번만 실행된다.(확대 한번.)
var $target = $(this); // $(event.target);
$target.width($target.width()*2); // 나누기는 축소
$target.height($target.height()*2);
$target.unbind();
});
});
</script>
</head>
<body>
<img src="../images/im18.jpg">
</body>
</html>
