Question

需要一些jquery帮助。我找到了一个脚本，显示带有悬停事件的缩略图。该脚本工作正常，但根据设计，图像会根据原始缩略图的像素位置显示在右侧。

我想改变弹出的图像的位置，使其始终位于屏幕中间（或者甚至更好，居中于包裹“ul”的“div”内部，然后在mouseout上返回到缩略图位置。但是，我不太清楚如何做到这一点。我尝试调整.animate（）jquery函数中的Top和Left位置，但我可以让它正常工作。

任何帮助或提示将不胜感激。感谢。

HTML：

<div>
<ul class="thumb_standard">
    <li><a href="#"><img src="<?php echo $domain;?>images/screenshots/occupants1.png" alt="Tenants/Occupants"/></a></li>
    <li><a href="#"><img src="<?php echo $domain;?>images/screenshots/occupants2.png" alt="Tenants/Occupants"/></a></li>
    <li><a href="#"><img src="<?php echo $domain;?>images/screenshots/occupants3.png" alt="Tenants/Occupants"/></a></li>
</ul>
</div>

CSS：

/*  Thumbnail popup display     */
ul.thumb_standard {
    /*float: left;*/
    list-style: none;
    margin: auto; 
    padding: 10px;
    width: 900px;
}
ul.thumb_standard li {
    margin: 0; padding: 5px;
    float: left;
    position: relative;  /* Set the absolute positioning base coordinate */
    width: 210px;
    height: 110px;
}
ul.thumb_standard li img {
    width: 200px; height: 100px; /* Set the small thumbnail size */
    -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
    /*border: 1px solid #ddd;*/
    padding: 5px;
    /*background: #f0f0f0;*/
    position: absolute;
    left: 0; top: 0;
}
ul.thumb_standard li img.hover {
    background:url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
    border: none; /* Get rid of border on hover */
}

.thumb_container{margin:auto;}
/*  END THUMBNAIL DISPLAY   */

jquery的：

<script type="text/javascript">
$("ul.thumb_standard li").hover(function() {
    $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
    $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
        .animate({
            /* The next 4 lines will vertically align this image */ 
            marginTop: '-210px', 
            marginLeft: '-110px',
            top: '50%',
            left: '50%',
            width: '700px', /* Set new width */
            height: '500px', /* Set new height */
            padding: '20px'
        }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

    } , function() {
    $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
    $(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
        .animate({
            marginTop: '0', /* Set alignment back to default */
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '200px', /* Set width back to default */
            height: '100px', /* Set height back to default */
            padding: '5px'
        }, 400);
});
</script>

Answer 1

请参阅以下代码：

<html>
<head>
<style>
/*  Thumbnail popup display     */
ul.thumb_standard {
    /*float: left;*/
    list-style: none;
    margin: auto; 
    padding: 10px;
    width: 900px;
}
ul.thumb_standard li {
    margin: 0;
    padding: 5px;
    position: relative;
    float: left;
    width: 210px;
    height: 110px;
    z-index: 0;
}
ul.thumb_standard li.hover img {
    z-index: 10;
}
ul.thumb_standard li img {
    position: relative;
    width: 210px;
    height: 110px;
    -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
}

.thumb_container
{
    margin:auto;
}
/*  END THUMBNAIL DISPLAY   */

</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.thumb_standard li").hover(function() {
    var li = $(this);
    var img = li.find('img');
    var div = li.closest('div');

    // Add hover class and stop animation
    li.addClass("hover");
    img.stop(); /* Stop animation queue buildup*/

    // Find the position relative to the div
    var new_width = 700;
    var new_height = 500;
    var new_left = (div.width() - new_width) / 2;
    var new_top = (div.height() - new_height) / 2;

    // Find the position relative to the li
    var li_offset = li.position();
    new_left -= li_offset.left;
    new_top -= li_offset.top;

    img.animate({
            top: new_top + 'px',
            left: new_left + 'px',
            width: new_width + 'px',
            height: new_height + 'px',
        }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

} , function() {

    var li = $(this);
    var img = $(this).find('img');
    var div = $(this).parent('div');

    // Remove hover class and stop animation
    li.removeClass("hover");
    img.stop(); /* Stop animation queue buildup*/

    var new_width = 210;
    var new_height = 110;

    img.animate({
            top: '0px',
            left: '0px',
            width: new_width + 'px',
            height: new_height + 'px',
        }, 400); /* this value of "400" is the speed of how fast/slow this hover animates */
});
});
</script>

</script>
</head>
<body>
<div style="position: relative; left: 100px; top: 300px; width: 1200px; height: 1200px; border: 1px solid blue;">
<ul class="thumb_standard">
    <li><a href="#"><img src="http://3.bp.blogspot.com/_ZaGO7GjCqAI/RvuFofzoLqI/AAAAAAAAFOU/fNdc5E14n_M/s640/google-birthday-doodles.png" alt="Tenants/Occupants"/></a></li>
    <li><a href="#"><img src="http://blog.searchenginewatch.com/blog/img/google-beta.jpg" alt="Tenants/Occupants"/></a></li>
    <li><a href="#"><img src="http://www.futureofthebook.org/blog/archives/google%202084.jpg" alt="Tenants/Occupants"/></a></li>
</ul>
</div>
</body>

jquery帮助使用鼠标悬停事件使弹出图像居中

1 个答案: