마우스 오버시 이미지확대 > SCRIPT

본문 바로가기
사이트 내 전체검색

SCRIPT

마우스 오버시 이미지확대

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 278회 작성일 20-12-11 14:20

본문

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
           
         var xOffset = 0;
         var yOffset = 10;

          $(document).on("mouseover",".thumbnail",function(e){ //마우스 오버시
     var bottom = $(window).height() - e.clientY; // bottom을 기준으로 마우스 좌표 알아내기 (현재 창 높이 - 현재 마우스 좌표)
     
     $("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' width='300px' /></p>"); //보여줄 이미지를 선언 
     if(bottom <= 220){  // 현재 마우스위치가 bottom에서부터 220 이하 일때 발동
     
     $("#preview")
      .css("top",(e.pageY - 220) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast"); //bottom 에서 현재 마우스 위치가 220 이하일때 마우스 오버시 이미지가 마우스 위로 올라가기 미리보기 화면 설정 셋팅
     }else{
      $("#preview")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast"); //미리보기 화면 설정 셋팅
     }
    });
    
    $(document).on("mousemove",".thumbnail",function(e){ //마우스 이동시
     var bottom = $(window).height() - e.clientY;
     if(bottom <= 220){   
      $("#preview")
       .css("top",(e.pageY - 220) + "px")
       .css("left",(e.pageX + yOffset) + "px")  //bottom 에서 현재 마우스 위치가 220 이하일때 마우스 오버시 이미지가 마우스 위로 올라가기
     }else{
      $("#preview")
       .css("top",(e.pageY - xOffset) + "px")
       .css("left",(e.pageX + yOffset) + "px")
     }
    });

    $(document).on("mouseout",".thumbnail",function(){ //마우스 아웃시
     $("#preview").remove();
    });
                
   });
</script>
           
<style>
 /* 미리보기 스타일 셋팅 */
 #preview{
 z-index: 9999;
 position:absolute;
 border:0px solid #ccc;
 background:#333;
 padding:1px;
 display:none;
 color:#fff;
 }
</style>

</head>
    
<body>
  <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" class="thumbnail" height='50px' />
<div class="test"></div>
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" class="thumbnail" height='50px' />
<div class="test"></div>

</body>
</html>



출처 : https://msm1307.tistory.com/entry/%EB%A7%88%EC%9A%B0%EC%8A%A4-%EC%98%A4%EB%B2%84%EC%8B%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%99%95%EB%8C%80 

댓글목록

등록된 댓글이 없습니다.

회원로그인

회원가입

Copyright © neion.co.kr All rights reserved.