увеличьте изображение и переместите его с помощью указателя мыши

Извините, если это может показаться незначительным для меня, чтобы спросить, но..

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

как то так http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ , а вы знаете, он должен двигаться с указателем в движении.

каков наиболее эффективный способ сделать это?

6
css html image javascript

6 ответов

предыдущие ответы могут быть именно тем, что вы ищете, и вы, возможно, уже решили это. Но я замечаю, что вы нигде не упоминали jquery в своем посте, и все эти ответы касались этого. Итак, для чистого решения JS...

Я исхожу из того, как был сформулирован вопрос, что вы уже знаете, как всплывающие изображения? Это можно сделать, кодируя абсолютно позиционированный скрытый тег img в html или сгенерированный на лету с помощью JS. Первое может быть проще если вы новичок JS. В моих примерах я предположу, что вы сделали что-то похожее на следующее:

<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;">

тогда вам нужна функция onMouseOver для вашего эскиза. Эта функция должна делать три вещи:

1) загружаем файл изображения в скрытое изображение

//I'll leave it up to you to get the right image in there.
document.getElementById('bigImg').src = xxxxxxxx;

2) расположите скрытое изображение

//See below for what to put in place of the xxxx's here.
document.getElementById('bigImg').style.top = xxxxxxxx;
document.getElementById('bigImg').style.left = xxxxxxxx;

3) Сделайте скрытое изображение

document.getElementById('bigImg').style.display = 'block';
document.getElementById('bigImg').style.visibility = 'visible';

затем вам нужно будет захватить событие onMouseMove и обновить сейчас позиция un-hidden изображения соответственно, используя тот же код, который вы использовали бы в (2) выше, чтобы расположить изображение. Это было бы что-то вроде следующего:

//Get the mouse position on IE and standards compliant browsers.
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
    var curCursorX = e.pageX;
    var curCursorY = e.pageY;
} else {
    var curCursorX = e.clientX + document.body.scrollLeft;
    var curCursorY = e.clientY + document.body.scrollTop;
}
document.getElementById('bigImg').style.top = curCursorY + 1;
document.getElementById('bigImg').style.left = curCursorX + 1;

и что должно работать. Просто добавьте событие onMouseOut, чтобы снова скрыть изображение bigImg. Вы можете изменить "+1 " в последних двух строках на то, что вам нравится, чтобы правильно разместить изображение по отношению к курсору.

обратите внимание, что весь приведенный выше код был только для демонстрационных целей; I не проверял, но это должно получить вас на верном пути. Вы можете расширить эту идею, предварительно загрузив большие изображения. Вы также можете забыть захват событий mousemove, используя setTimeout для обновления позиции каждые 20 мс или около того, хотя я думаю, что этот подход более сложный и менее желательный. Я упоминаю об этом только потому, что некоторые разработчики (включая меня, когда я начал) имеют отвращение к обработке событий JS.

Я сделал что-то подобное с a пользовательский тег ColdFusion я написал, что будет генерировать плавающий div пользователи могут щелкнуть и перетащить по экрану. Тот же принцип. Если вам нужно, я могу копать, чтобы ответить на любые дополнительные вопросы более подробно.

удачи!

4

решение Liece близко, но не достигнет желаемого эффекта большого изображения после курсора.

вот решение в jQuery:

  $(document).ready(function() {
    $("img.small").hover (function () {
      $("img.large").show();
    }, function () {
      $("img.large").hide();
    });

    $("img.small").mousemove(function(e) {
      $("img.large").css("top",e.pageY + 5);
      $("img.large").css("left",e.pageX + 5);
    });
  });

HTML-код:

<img class="small" src="fu.jpg">
<img class="large" src="bar.jpg">

CSS:

img { position: absolute; }
2

попробуйте эту ссылку [jquery with auto positioning]

1.Просто

http://jquery.bassistance.de/tooltip/demo/

2.Хорошо с форумом

http://flowplayer.org/tools/tooltip/index.html

1

если я правильно вас понял, вы хотите расположить свое большое изображение относительно курсора. Одно решение в jquery (я не уверен на 100% в коде здесь, но логика есть):

$('.thumb').hover(function(e){
    var relativeX = e.pageX - 100;
    var relativeY = e.pageY - 100;

    $(.image).css("top", relativeY);
    $(.image).css("left", relativeX);
    $(.image).show();
}, function(){
    $(.image).hide();
   })
1

jQuery-это самый простой маршрут. абсолютное положение является ключевым.

1

^ в дополнение к вышесказанному, вот рабочая Скрипка JS. Посетите: jsfiddle.net/hdwZ8/1/

Он был грубо отредактирован, поэтому он не использует только общие теги img css, которые легко использовать с этим сейчас.

Я использую этот скрипт вместо лайтбокса на моем клиентском сайте Wordpress, быстрое увеличение изображения с помощью мыши намного приятнее IMO. Это очень легко сделать эффективные галереи, особенно с AdvancedCustomFields plug-in & в WP PHP repeater петли!

0