Яблоко, как курсор мыши-курсор мыши

У Apple есть довольно крутая функция при наведении указателя мыши на большое изображение здесь: 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

Удивительное решение, но нет поддержки IE в соответствии с этой диаграммой? ПТК. – a7drew

Как насчет эффектов, таких как масштабирование или затухание курсора? – Czar

Настройка обработчика событий в JQuery для MouseEnter() и MouseLeave().

Во время mouseenter() покажите значок масштабирования и спрячьте его, когда стрелка mouseleave(). Вы должны реализовать эти два состояния с помощью классов CSS. Значок масштабирования должен быть абсолютно расположен, а его позиционирующий контейнер должен быть телом веб-страницы.

Затем выполните изображение mousemove() над изображением. Внутри этой функции установите абсолютное положение значка масштабирования, чтобы оно всегда немного вверх и назад от текущей позиции мыши.

Sample Event Bindings

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

});

Это заставляет вас поведение значок масштабирования. Поведение события click - всего лишь несколько строк. Следующий код показывает ручную функцию масштабирования, которая использует новые правила css3. Этот код создан для webkit, но вы можете легко добавить другие правила для браузера, чтобы получить хорошую поддержку кросс-браузера.

Функция масштабирования рассматривает положение щелчка мыши и преобразует эту позицию в один из четырех квадрантов. Если бы вы хотели, вы могли бы разделить изображение на более квадранты. Затем, как только квадрант известен, вы устанавливаете абсолютное положение и изменяете высоту/ширину изображения. Свойство перехода css3 замедляет изменение высоты/ширины, поэтому вы получаете хорошую функцию масштабирования.

Sample Увеличить Поведение

<!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 ... выглядит красиво. но как насчет эффекта масштабирования лупы? Эффект лайтбокса уже сделан. Моя проблема - значок курсора smal + эффект масштабирования CURSOR ... любые идеи по этому поводу? – Czar

Apple выглядит так: они используют библиотеку масштабирования: http://images.apple.com/global/scripts/zoomerlay.js, но вы можете искать «jQuery image zoom» и найти связку для этой библиотеки. – a7drew

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

Яблоко, как курсор мыши-курсор мыши

ответ

Смежные вопросы