Показать сообщение отдельно
  #75 (permalink)  
Старый 06.10.2011, 15:54
Кандидат Javascript-наук
Отправить личное сообщение для nyols Посмотреть профиль Найти все сообщения от nyols
 
Регистрация: 16.02.2011
Сообщений: 134

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="carousel">
    <div class="item" style="top: 30px;left: 320px;">
        <img src="http://freeimagesarchive.com/data/media/131/1_images.jpg" />
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam purus mauris, semper a feugiat in, ullamcorper sed enim. Aenean pretium tincidunt leo sed egestas. Phasellus viverra sem tristique odio malesuada auctor. Aenean ultricies vestibulum tortor eu convallis.</div>
    </div>
    <div class="item" style="top: 200px;left: 40px;">
        <img src="http://www.random-images.com/image/obj21geo38pg1p5.jpg" />
        <div class="description">Quisque facilisis rutrum risus, quis consectetur metus eleifend ut. Pellentesque porttitor, elit sit amet lobortis hendrerit, urna orci ultrices turpis</div>
    </div>
    <div class="item" style="top: 500px;left: 300px;">
        <img src="http://www.nasa.gov/images/content/174735main_LEFTFullDisk.jpg" />
        <div class="description">sit amet fermentum orci erat sit amet lorem. Pellentesque quis odio neque. Donec vitae diam urna, at sollicitudin nunc.</div>
    </div>
    <div class="item" style="top: 400px;left: 700px;">
        <img src="http://www.lbto.org/images/Astronomical_Images/Holmes_V.jpg" />
        <div class="description">Vestibulum posuere imperdiet molestie. Curabitur semper mauris at elit posuere vel suscipit orci vehicula. Vivamus in massa urna</div>
    </div>
    <div class="item" style="top: 150px;left: 650px;">
        <div class="description">vitae gravida lectus. Aliquam vitae pharetra tortor. Vestibulum bibendum blandit risus, in tristique nulla rhoncus id. Nam malesuada felis felis.</div><img src="http://www.crystalxp.net/galerie/img/img-images-fractal-cloud-cebeul-8721.jpg" />
        
    </div>
</div>
<script>
(function() {
    var current = '';
    $('#carousel .item').click(function() {
        if (current != '') {
            var top = current.data('top');
            var left = current.data('left');
            current.find('.description').hide();
            current.animate({top: top, left: left, width: '250px', height: '150px'}, 2000, function() {
                $(this).css('z-index', '1');
            });
            current.find('img').animate({width: '250px', height: '150px'}, 2000);
        }
        
        $(this).data('top', $(this).css('top'));
        $(this).data('left', $(this).css('left'));
        $(this).animate({top: '200px', left: '300px', width: '400px', height: '300px'}, 2000, function() {
            $('.description', this).show();
            $(this).css('z-index', '5');
        });
        $('img', this).animate({width: '400px', height: '300px'}, 2000);
        current = $(this);
    });
})();
</script>
<style>
#carousel {
    position: relative;
}

.item, .item img {
    width: 250px;
    height: 150px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1
}

.item {
    position: absolute;
    cursor: pointer;
}

.item .description {
    z-index: 10;
    position: relative;
    display: none;
}
</style>
</body>
</html>
Ответить с цитированием