어떻게 내가 "페이스 북의 줌"

Question

임은 웹 사이트 제작을 수행하고 난 당신이 위로 마우스를 가져 가면

https://chrome.google.com/extensions/detail/elioihkkcdgakfbahdoddophfngopipi 내가 확장 뒤에 중요한 아이디어가 생각 @ 페이스 북 사진 확대를 호출이 구글 크롬 확장 기능을 사랑 엄지 손톱, 원본 이미지 파일을 잡고 전체보기로 표시합니다. 이미지가 너무 크면 창의 모서리 나 위쪽 및 아래쪽 막대의 위치가됩니다. 너무 크지 않으면 마우스 위치 옆에 떠있게됩니다.

내가 알고있는 논리는 사실이지만 실제로 코딩하는 것은 다소 어려운 것 같습니다. 내가 이해하지 못하는 부분은 마우스를 왼쪽/오른쪽으로 움직일 때 확장 된 이미지의 위치를 ​​코딩하고 계약/확장하도록하는 방법입니다. 감사합니다

Answer 1

13 zoom jquery plugins in here. 귀하의 요구 사항에 가장 적합한 것을 선택하십시오 :

Answer 2

Chrome 확장 기능과 유사한 툴팁을 확인하십시오. 그러나 URL에 축소판 그림 및 전체 크기 이미지를 제공해야합니다. 다음은 원래 blog post입니다.

---

스크립트를 수정하여 커서와 오른쪽 브라우저 가장자리 사이의 거리에 맞게 이미지 크기를 조정하십시오. 완벽하지는 않지만 작동합니다. 여기에 demo이 있습니다. mouseover에

/* 
* Image preview script 
* powered by jQuery (http://www.jquery.com) 
* 
* written by Alen Grakalic (http://cssglobe.com) 
* 
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery 
* 
*/ 

this.imagePreview = function(){ 
    /* CONFIG */ 

     xOffset = 10; 
     yOffset = 20; 

     // these 2 variable determine popup's distance from the cursor 
     // you might want to adjust to get the right result 

    /* END CONFIG */ 
    $('a.preview').hover(function(e){ 
     this.t = this.title; 
     this.title = ''; 
     var p, c = (this.t != '') ? '<br/>' + this.t : ''; 
     $('body').append('<p id="preview"><img src="' + this.href + '" alt="Image preview" />' + c + '</p>'); 

     // load image and get size 
     p = $('#preview'); 
     p 
      .fadeIn('fast') 
      .find('img').load(function(){ 
       // get image dimensions after it has been loaded 
       p.data('widths', [ $(window).width(), p.find('img').width() ]); 
       // set image to 100% to fit in preview window 
       $(this).width('100%'); 
       position(e); 
      }); 
    }, 
    function(){ 
     this.title = this.t; 
     $('#preview').remove(); 
    }); 

    $('a.preview').mousemove(function(e){ 
     position(e); 
    }); 

    var position = function(e){ 
     var w, prevw = $('#preview'), 
      w = $.data(prevw[0], 'widths'); 
     if (w) { 
      prevw 
       .css('top', e.pageY + yOffset) 
       .css('left', e.pageX + xOffset) 
       .css('max-width', (e.pageX + prevw.outerWidth() > w[0]) ? w[0] - e.pageX - xOffset : w[1] || 'auto'); 
     } 
    }; 

}; 

// starting the script on page load 
$(document).ready(function(){ 
    imagePreview(); 
}); 

Answer 3

당신은 당신이 같은 방법으로 왼쪽 상단을 업데이트 mousemove에

css({position: 'absolute', left: e.pageX, top: e.pageY}) 

로 큰 이미지를 만들 수 있습니다. 또한

검사 :

• http://api.jquery.com/event.pageY/
• http://api.jquery.com/css/
• http://api.jquery.com/event.pageX/

Answer 4

는 u는 그것을 알아낼나요 http://www.ideabonus.com/Kabbar/index.html