Apple comme souris curseur hover-zoom

Apple a une fonction assez cool en survolant une grande image ici: http://www.apple.com/aperture/what-is.html Il fait un zoom arrière sur une petite icône de loupe qui se déplace avec le curseur tandis que sur une image zoomable.Apple comme souris curseur hover-zoom

Comment puis-je faire cela, de préférence avec JQuery?

Source

2010-07-07 Czar

Vous pouvez simplement utiliser CSS comme ceci:

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

voir ici: http://www.quirksmode.org/css/cursor.html

Source

2010-07-07 18:20:41

?? Comment le curseur changera-t-il dynamiquement pour suivre l'image source lorsque le curseur se déplace? – Pointy

Solution géniale, mais pas de support IE selon ce tableau? Uhg. – a7drew

Qu'en est-il des effets comme le zoom ou le fondu du curseur? – Czar

Configuration d'un gestionnaire d'événement dans jQuery pour mouseenter() et mouseleave(). Pendant l'opération mouseenter(), affichez l'icône de zoom et masquez-la lorsque mouseleave() se déclenche. Vous devez implémenter ces deux états avec des classes CSS. L'icône de zoom doit être positionnée de manière absolue et son conteneur de positionnement doit être le corps de la page Web.

Ensuite, implémentez l'événement mousemove() sur l'image. À l'intérieur de cette fonction, définissez la position absolue de l'icône de zoom de façon à ce qu'elle soit toujours un peu au-dessus de la position actuelle de la souris.

Exemple Manchettes événement

$('.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); 

});

Cela vous obtient le comportement de l'icône de zoom. Le comportement de l'événement click est juste quelques lignes de plus. Le code suivant montre une fonction de zoom faite à la main qui utilise les nouvelles règles css3. Ce code est conçu pour webkit, mais vous pouvez facilement ajouter les autres règles spécifiques du navigateur pour obtenir une bonne compatibilité avec les différents navigateurs.

La fonction de zoom examine la position du clic de la souris et convertit cette position en l'un des quatre quadrants. Vous pouvez diviser l'image en plusieurs quadrants si vous le souhaitez. Ensuite, une fois le quadrant connu, vous définissez la position absolue et modifiez la hauteur/largeur de l'image. La propriété de transition css3 ralentit le changement de hauteur/largeur de sorte que vous obtenez une fonction de zoom agréable.

Exemple Zoom Comportement

<!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>

Source

2010-07-07 18:32:50 a7drew

hm ... c'est joli. mais qu'en est-il de l'effet de zoom de la loupe? L'effet lightbox est déjà fait. Mon problème est l'icône du curseur Smal + effet de zoom du CURSEUR ... des idées là-dessus? – Czar

Apple semble utiliser une bibliothèque de zoom: http://images.apple.com/global/scripts/zoomerlay.js, mais vous pouvez également rechercher "zoom image jQuery" et trouver un groupe pour cette bibliothèque. – a7drew

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

Apple comme souris curseur hover-zoom

Répondre

Questions connexes