1

我目前正在制作一个图片库。它工作正常，除了在谷歌浏览器中，当您将鼠标悬停在顶行时，下面的行将开始振动和移动。您可以在此处找到一个工作示例。

的HTML：

     <div id="gallery">
             <a href="<?php echo'?img=$imgname';?>"  > 
                           <span c

lass="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                      <a href="<?php echo'?img=$imgname';?>" >
                       <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>" > 
                         <span class="title"><?php echo'$imgtitle';?></span>
                            <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                        <a href="<?php echo'?img=$imgname';?>" > 
                        <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                      <a href="<?php echo'?img=$imgname';?>"  >
                       <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>" > 
                         <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                      <a href="<?php echo'?img=$imgname';?>"  >
                       <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>"  >
                          <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>

                         <a href="<?php echo'?img=$imgname';?>"  >
                          <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                        <a href="<?php echo'?img=$imgname';?>"  > 
                        <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
                         <a href="<?php echo'?img=$imgname';?>"  > 
                         <span class="title"><?php echo'$imgtitle';?></span>
                             <img src="http://ivojonkers.com/fotorichard/images_slider/1.jpg" />
                        </a>
    </div>

CSS

#gallery {
    width: 100%; 
    margin-top: 100px;
    padding-bottom: 100px;
    display:block;
    text-align:center;
}

#gallery a {
    display: inline-block;
    margin: 0 12.5px 25px 12.5px;
    position: relative;
    height:150px;
    width:225px;
}

#gallery a img {
    height:150px;
    width:225px;
    position:relative;
}

jQuery

$(document).ready(function() {  
     $("#gallery a img").hover(function(){
            $(this).css({"z-index":"99"}); 
             $(this).stop(true, false).animate({ "margin-left":"-112.5px",
                    "margin-top":"-150px",
                    "bottom":"-75px",
                    "height":"300px",
                    "width":"450px"
                    });
        }, function() {
        $(this).css({"z-index":"0"}); 
             $(this).stop(true, false).animate({"height":"150px",
                    "width":"225px",
                    "margin-left":"0px",
                    "margin-top":"0px",
                    "bottom":"0px"
                 });
        });
});

PS如果你缩小更多它会更明显。

提前感谢您的帮助。

4

5 回答 5

2

我认为最好的选择是复制您的基本图像并放大它。

 $(function() {  
         $("#gallery a img").mouseenter(function(){
           var d = $(this).clone().addClass('preview')
           .css({position:'absolute',top:$(this).position().top, left:$(this).position().left,zIndex:99})
           .insertAfter($(this)).animate({ "margin-left":"-112.5px",
                        "margin-top":"-150px",
                        "bottom":"-75px",
                        "height":"300px",
                        "width":"450px" 
}).mouseleave(function(){
           $(this).animate({"height":"150px",
                        "width":"225px",
                        "margin-left":"0px",
                        "margin-top":"0px",
                        "bottom":"0px"
                                             },
                        function(){$(this).remove()});
            })
           });
    });

在jsfiddle上试试。

于 2013-01-14T23:10:43.920 回答
1

这会将所有图像向右移动一点（所以只需做一些额外的工作），但是将图像设置为绝对值可以消除我的振动。

#gallery a img {
height:150px;
width:225px;
position:absolute;
}
于 2013-01-14T23:13:26.267 回答
1

代替 ：

#gallery a {
display:inline-block;
/* ... */
}

和

#gallery a {
display:block;
float:left;
/* ... */
}
于 2013-01-14T23:14:54.750 回答
1

尝试将 z-index 恢复（回到零）移动到动画回调中：

// ...   
$(this).stop(true, false).animate({"height":"150px",
    "width":"225px",
    "margin-left":"0px",
    "margin-top":"0px",
    "bottom":"0px"
}, function(){
    // Do this last
    $(this).css({"z-index":"0"}); 
});
// ...

由于某种原因，jsfiddle 今天不适合我，否则我会把它放在一起。

于 2013-01-14T23:01:47.930 回答
0

我在你们的帮助下解决了这个问题。我所要做的就是改变这个：

    // ...   
$(this).stop(true, false).animate({"height":"150px",
    "width":"225px",
    "margin-left":"0px",
    "margin-top":"0px",
    "bottom":"0px"
}, function(){
    // Do this last
    $(this).css({"z-index":"0"}); 
});
// ...

对此：

#gallery a img {
height:150px;
width:225px;
position:absolute;
left:0px;
}
于 2013-01-15T14:56:34.153 回答