html наведите курсор мыши на

Question

Я хочу иметь фотографию на сайте, и когда я нажимаю, я хочу увеличить эффект увеличения лупы.

Могу ли я сделать это в html с холстом или еще что-нибудь? Может быть, javascript?

спасибо

Answer 1

Canvas не поддерживается IE без сторонних плагинов. Вы захотите сделать это в JavaScript. jQuery делает это очень простым и чистым. Привяжите обработчики для событий ввода/вывода для элемента изображения, который вы хотите увеличить, используя .hover(). «Обработчики привязки» просто означают, что вы передаете две функции в .hover(), которые будут выполняться, когда пользователь будет входить и выходить, соответственно. Эти функции будут использовать animate(), которые вы можете просто передать новый размер.

Посмотрите документацию для .animate() и .hover(). Если вы совершенно новичок в jQuery, check out the tutorials.

Answer 2

Вы можете показать изображение в DIV в качестве фона изображения и изменить положение с небольшим количеством JavaScript.

Вот библиотека с некоторыми примерами: http://www.mind-projects.it/projects/jqzoom/demos.php

Answer 3

Я думаю, что нашел то, что вы хотите: loupe.js. Из того, что я видел, это одно из лучших эффектов лупы/увеличительного стекла.

Answer 4

Заполните свою фотографию в div и добавьте Zoom через CSS на hover. Вы можете увеличить z-индекс при зависании. Вы можете добавить к CSS ниже, чтобы увеличить/увеличить изображение увеличенного изображения. Если вы не хотите изобретать велосипед, обратите внимание на некоторый плагин JQuery, который может сделать то же самое элегантным способом с меньшими усилиями.

CSS:

#div-1 { 
      position: absolute; 
     } 
#div-1.hover { 
      position: absolute; zoom: 70%; border: solid 1px; z-index:10; 
     } 

Jquery/Javascript:

  <script type = "text/javascript"> 
$(document).ready(function() { 
$(".div-1").onmouseover(function() { 
    toggle_visibility('div-1'); 
}) 

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if ($(e).hasClass("hover")) { 
     $(e).removeClass("hover"); 
    } else { 
     $($(e)).addClass("hover"); 
     $($(e)).attr({ 
      width: "100%", 
      height: "100%" 
     }); 
    } 
}}); < /script> 

Answer 5

Я нашел относительный пример, чтобы посетить эти:

1. example in ajax-zoom website.
2. другой example: Zoom Effect (Caribbean),Frame Effect (Mona Lisa),X-Ray Effect (Homer),Print Effect (G5).
3. GOOOOOOOOOGLE :)