클릭시 이미지 확대 팝업

클릭시 이미지 확대 팝업

QA

클릭시 이미지 확대 팝업

본문

이미지를 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>

 

답변을 작성하시기 전에 로그인 해주세요.
전체 59,304
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT