蘋果像鼠標懸停縮放光標

當在這裏懸停在一個大圖像時，蘋果有一個很酷的功能：http://www.apple.com/aperture/what-is.html它放大了一個小的放大鏡玻璃圖標，它隨着光標在可縮放的圖像上移動。蘋果像鼠標懸停縮放光標

我該怎麼做，最好用JQuery？

2010-07-07 Czar

你可以只使用CSS像這樣：

cursor: url(pix/cursor_ppk.gif), auto.

在這裏看到：http://www.quirksmode.org/css/cursor.html

來源

2010-07-07 18:20:41

？隨着光標移動，光標將如何動態更改以跟隨源圖像？ – Pointy 2010-07-07 18:34:56

真棒解決方案，但根據該圖表沒有IE支持？ UHG。 – a7drew 2010-07-07 18:48:38

如何縮放或淡化光標效果？ – Czar 2010-07-07 20:50:08

設置jQuery中的事件處理程序的mouseenter（）和鼠標離開（）。

在mouseenter（）過程中，顯示縮放圖標並在mouseleave（）觸發時將其隱藏。你應該用CSS類來實現這兩個狀態。縮放圖標應該是絕對定位的，其定位容器應該是網頁的主體。

然後，在圖像上實現mousemove（）事件。在此功能中，設置縮放圖標的絕對位置，使其始終與當前鼠標位置相距一點點。

樣本事件綁定

$('.someImage').bind('mouseenter', function() { 

    $('#zoomIcon').addClass('over'); 

}).bind('mouseleave', function() { 

    $('#zoomIcon').removeClass('over'); 

}).bind('mousemove', function (e) { 

    $('#zoomIcon').css('top', e.clientY-40).css('left', e.clientX); 

});

這可以讓你縮放圖標的行爲。點擊事件行爲只是幾行。以下代碼顯示了使用新css3規則的手工縮放功能。此代碼是爲webkit構建的，但您可以輕鬆添加其他瀏覽器特定規則以獲得良好的跨瀏覽器支持。

縮放功能檢查鼠標點擊的位置並將該位置轉換爲四個象限之一。如果你願意，你可以將圖像分成更多的象限。然後，一旦知道象限，就可以設置絕對位置並更改圖像的高度/寬度。 css3轉換屬性減慢了高度/寬度的變化，所以你可以獲得很好的縮放功能。

樣品縮放行爲

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>sample zoom</title> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 

    <style> 
     #zoomContainer, 
     #zoomContainer img { 
      height:300px; 
      width:400px; 
     } 
     #zoomContainer img { 
      -transition-property: height,width; 
      -webkit-transition-duration: 3s; 
      position:absolute; 
     } 
     #zoomContainer { 
      background:#F00; 
      overflow:hidden; 
      position:relative; 
      border:1px solid #000; 
     } 
     #zoomContainer.over { 
      cursor:pointer; 
     } 
     #zoomContainer img.zoom { 
      width:962px; 
      height:517px; 
     } 
    </style> 

    <script type="text/javascript"> 

     /* my custom jQuery extension */ 

     (function ($) { 

      $.fn.setPositionByQuadrant = function (quadrant) { 

       switch (quadrant) { 

        case 1: 
        this.removeAttr('style').css('top', 0).css('left', 0); 
        break; 

        case 2: 
        this.removeAttr('style').css('top', 0).css('right', 0); 
        break; 

        case 3: 
        this.removeAttr('style').css('bottom', 0).css('left', 0); 
        break; 

        case 4: 
        this.removeAttr('style').css('bottom', 0).css('right', 0); 
        break; 
       } 

       return this; 
      }; 

     })(jQuery); 

     /* page specific javascript */ 

     $(function() { 

      $('#zoomContainer').mouseenter(function() { 
       $(this).addClass('over'); 
      }).mouseleave(function() { 
       $(this).removeClass('over'); 
      }).mousemove(function() { 
       // change position of zoom icon here 
      }).click(function (e) { 
       var quadrant = convertClickPositionToQuadrant(e, $(this)); 
       var img = $(this).find('img').toggleClass('zoom').setPositionByQuadrant(quadrant); 
      }); 

     }); 

     /* conversion function */ 

     function convertClickPositionToQuadrant(e,target) { 

      var x = e.offsetX; 
      var y = e.offsetY; 

      var xMiddle = target.width()/2; 
      var yMiddle = target.height()/2; 

      if (x > xMiddle) { 
       if (y > yMiddle) 
        return 4; 
       else 
        return 2; 

      } else { 
       if (y > yMiddle) 
        return 3; 
       else 
        return 1; 
      } 
     } 

    </script> 

</head> 

<body> 

    <h2>Sample Zoom</h2> 

    <div id="zoomContainer"> 
     <img src="http://dots.physics.orst.edu/graphics/image_maps/usa_map.gif" alt="" /> 
    </div> 

</body> 
</html>

來源

2010-07-07 18:32:50 a7drew

hm ...看起來不錯。但放大鏡玻璃的變焦效果如何？燈箱效果已經完成。我的問題是CURSOR的小指針圖標+縮放效果...有關於此的任何想法？ – Czar 2010-07-07 20:49:50

蘋果看起來像他們正在使用縮放庫：http：//images.apple.com/global/scripts/zoomerlay.js，但您可以搜索「jQuery圖像縮放」，並找到該庫的一堆。 – a7drew 2010-07-07 21:14:25

http://www.tripwiremagazine.com/2010/02/15-jquery-plugins-to-create-stunning-image-zoom-effects.html – a7drew 2010-07-07 21:14:49

蘋果像鼠標懸停縮放光標

回答

相關問題