Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Приклеислась картинка к крану =( (https://javascript.ru/forum/jquery/26092-prikleislas-kartinka-k-kranu-%3D.html)

damintsew 25.02.2012 13:43

Приклеислась картинка к крану =(
 
Ошибка в названиее "экрану".

Доброго дня!
Помогите пожалуйста. Сижу разбираюсь с плавным увеличением фотографий.
Но почемуто они "приклеились" к экрану и двигаются вместе с ним!

Помогите разобраться пожалуйста!
Код JS
$(document).ready(function() {

                        //пременная отступа
                        var cont_left = $("#container").position().left;



                        // рапределяем миниатюра по длинне,
                        // смещая их по горизонтали
                        $("div.img").each(function(index) {
                var left = (index * 160) + cont_left;
                    $(this).css("left", left + "px");
                            alert(left);
                });

                        $("div.resize img").hover(function() {
            // при наведении курсора мыши
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
               height   : "250",
               width    : "250",
               left             : "-=50",
               top              : "-=50"
            }, "fast");
        }, function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
               height   : "150",
               width    : "150",
               left             : "+=50",
               top              : "+=50"
            }, "fast");
        });

    });



CSS
#container {
    z-index: 0;
    text-align: center;
    margin: 0;
    padding: 0;
}
.img {
    z-index: 0;
    float: left;
    margin: 0;
    padding: 0;
    position: fixed;
}
.img div img {
    position: relative;
    border: none;
}
.clear {
    clear: both;
}




HTML
<div id="container">
                        <div class="img"><div class="resize"><img src="themes/classic/images/das/minibar1.jpg" width="150" height="150"></div></div>
                        <div class="img"><div class="resize"><img src="themes/classic/images/das/minibar2.jpg" width="150" height="150"></div></div>
                        <div class="img"><div class="resize"><img src="themes/classic/images/das/minibar3.jpg" width="150" height="150"></div></div>

                        <div class="clear"></div>
                    </div>



Google не дал ничего, т.к. я не смогу правильно сформировать ему запрос:)

Спасибо за внимание.

Rootpassword 25.02.2012 13:49

"Приклеилось" это position: fixed; в img {}, вы сами ему это поведение задали.
смените на absolute, как минимум

damintsew 25.02.2012 14:09

Спасибо большое!
Только теперь у меня съезжает все содержимое сайта, при увеличении каарнки... Не подскажете как это поправить ?

Rootpassword 25.02.2012 14:57

Как съезжает? ну так убирайте картинку из потока через position:absolute, одновременно не убирая оригинал, что бы не схлопывалось. Без примера,который можно запустить - неясно, что у вас там.


Часовой пояс GMT +3, время: 23:04.