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

Question

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

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

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

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

Answer 1

Предыдущие ответы могут быть именно тем, что вы ищете, и вы, возможно, уже решили это. Но я отмечаю, что вы нигде не упоминали 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 и обновить позицию теперь не скрытого изображения, соответственно, используя тот же код, который вы использовали в (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» в последних двух строках на любое другое, чтобы правильно разместить изображение относительно курсора.

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

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

Удачи!

Answer 2

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

Вот решение в 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; }

Answer 3

Jquery - самый простой маршрут.абсолютная позиция является ключевой.

Answer 4

если я вас правильно понял, вы хотите расположить ваше большое изображение относительно курсора.Одно из решений в 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();
   })

Answer 5

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

1.Simple

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

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

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

Answer 6

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

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

Я использую этот скрипт вместо лайтбокса на моем клиентском сайте Wordpress, быстрое увеличение изображения при наведении курсора мыши намного приятнее ИМО. Создавать эффективные галереи очень легко, особенно с помощью плагина AdvancedCustomFields и в циклах репитера WP PHP!