Помощь jquery в центрировании всплывающего изображения с событием наведения мыши - PullRequest
Новая
       2

Помощь jquery в центрировании всплывающего изображения с событием наведения мыши

0 голосов
/ 03 декабря 2010

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

Я хочу изменить положение всплывающего изображения таким образом, чтобы оно всегда находилось посередине экрана (или, что еще лучше, по центру внутри "div", заключающего "ul"), затем при наведении мыши оно возвращается к Расположение миниатюр. Но я не совсем уверен, как это сделать. Я попытался настроить расположение верхнего и левого мест в функции jquery .animate (), но смог заставить его работать правильно.

Любая помощь или советы будут оценены. Спасибо.

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>

1 Ответ

1 голос
/ 03 декабря 2010

Пожалуйста, смотрите следующий код: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...