HTML увеличение при наведении мыши

Question

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

Могу ли я сделать это в HTML с холстом или что-то? JavaScript может быть?

спасибо

Answer 1

Поместите свою фотографию в div и добавьте Zoom через CSS при наведении курсора. Вы можете увеличить 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 2

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

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

Answer 3

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

Answer 4

Вы можете показать изображение в div как background-image и изменить положение с помощью небольшого JavaScript.

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

Answer 5

Я нашел некоторый относительный пример, поэтому посетите его:

1. пример на веб-сайте ajax-zoom .
2. другой пример: эффект масштабирования (Карибский бассейн), Эффект кадра (Мона Лиза), Рентгеновский эффект (Гомер), Эффект печати (G5) .
3. GOOOOOOOOOGLE:)