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

Question

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

Вот что у меня есть:

<style>
img{float:left;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#I1").mouseover(function(){

    $("#I1").animate({height:300,width:300},"fast");
   });
 $("#I1").mouseout(function(){
    $("#I1").animate({height:96,width:128},"fast");
   });
});
</script> 

 <img id="I1" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >
<img id="I2" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >

Answer 1

Вы пытались дать ему более высокий z-индекс, чем у остальных, и абсолютную позицию? Вам определенно нужно дать ему абсолютную позицию - это то, как вы удаляете его из стека DOM и заставляете его плавать там независимо, без зависимости от него других элементов.

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

.. удален старый URL ..

Обновлен новыми "изображениями", более плавной анимацией и удалены ошибки, по сравнению с которыми раньше застревало изображение.

http://jsfiddle.net/Swader/jKTVn/7/

Answer 2

Вам определенно нужно держать его абсолютно позиционированным, чтобы вывести его из нормального потока. К сожалению, это также означает, что вам нужно отслеживать позицию. Я мог бы рекомендовать дублировать абсолютно позиционированный div прямо сверху, придать ему более высокий z-индекс, а затем анимировать расширение этого div. При наведении мышки, нажмите его, а затем удалите элемент.

<style>
.over {
  /* We use this for all of the generated hover-overs */
  position:absolute;
  z-index:2;
}
img {
  float:left;
  position:relative; /* z-index doesn't work unless position is set */
  z-index:1;
}
</style>

<div id="images">
  <img id="img1" src="foo.jpg">
  <img id="img2" src="bar.jpg">
  <img id="img3" src="baz.jpg">
</div>

<script>
  // First catch the mouse enter, grab position, make new element, append it, then animate
  $("img").mouseenter(function() {
    var top = $(this).position().top;
    var left = $(this).position().left;
    var src = $(this).attr("src");
    $('<div class="over" style="top:'+top+' left:'+left+'" src="'+src+'"></div>')
     .appendTo($("#images"))
     .animate({height:300,width:300},"fast");
  });

  // Note the mouseleave on the hovered element instead of the img
  $(".over").mouseleave(function() {
    var self = this;
    $(this).animate({height:96,width:128},"fast",function() {
      self.remove();
    }
  });
</script>

Answer 3

См. Рабочую демонстрацию: http://jsfiddle.net/rathoreahsan/Gsh6B/3/

Вы должны взять эти изображения в отдельных DIV с применением стиля div { display:inline }.Вы должны установить свойство z-index для обоих DIVs и position:relative & position:absolute, как я делал в своей демонстрации.Наиболее важным является left:130px на втором img div, который удерживает img в той же позиции.

См. Еще одну рабочую демонстрацию решения, заданного Swader с небольшими изменениями:

http://jsfiddle.net/rathoreahsan/jKTVn/5/

Answer 4

Эффекты, которые вы получаете в Google Images, находятся при наведении лайтбокса. Вы можете попробовать Suckerfish-Hoverlightbox (см. demo ) для этого эффекта. Изменение размера одного изображения приведет к изменению положения других изображений.