Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Беспорядок фото на столе с JQuery и CSS3!

Беспорядок фото на столе с JQuery и CSS3!


Демо: смотреть
Скачать: makemess.zip [359,7 Kb] (cкачиваний: 199)


Я знаю, что название это немного странное, но сегодня мы собираемся создать хорошую галерею "с помощью JQuery и CSS3 вращений. Это также отличный способ показать вам, как создать случайное число в javascript. Взгляните на код в данном уроке.

Давайте начнем с создания 'index.html', 'default.css', 'mess.js "и" IMG "папки.

index.html

Прежде всего мы должны составить очень простую HTML-разметку. Основной контейнер - беспорядок, который содержит неупорядоченный список.

<a href="#" class="make">Make Mess</a>      
<div class="mess">
    <ul class="reset">
        <li><img src="img/img1.jpg" alt=""></li>
        <li><img src="img/img2.jpg" alt=""></li>
        <li><img src="img/img3.jpg" alt=""></li>
        <li><img src="img/img4.jpg" alt=""></li>
        <li><img src="img/img5.jpg" alt=""></li>
        <!-- etc. -->
    </ul>
</div>


mess.js
Скрипт который содержит функцию рандомного показа фото, а так же в нем css3 стили для расположения наших фото.
$(function(){ // shorcut of $(document).ready(function(){ .. });
  
    var li = $('.mess').find('li'); // looking for all 'li' elements in the main container
  
    var mess = {
        random: function(low, up){
            return Math.floor((Math.random()*(low-up+1))+up); // set up range of the random numbers
        },
        css: function(){
            var rotate = this.random(-20, 20), // our degrees range  
                zindex = this.random(0, li.length), // random z-index number
                degrees = 'rotate('+rotate+'deg)';
            return {'degrees': degrees, 'zindex': zindex }
        },
        degrees: function(element){
            // create rotation in CSS3 and set random z-index
            var random = this.css();
            $(element).css({
                '-webkit-transform': random.degrees,
                '-moz-transform': random.degrees,
                '-o-transform': random.degrees,
                'z-index': random.zindex
            });
        },
        animate: function(element, x, y){
            $(element).animate({
                top: y,
                left: x
            }, 500);
        }
    }
  
    li.each(function(){
        mess.degrees($(this));
    });
              
    $('.make').toggle(function(){ // start making the mess!
        li.each(function(){
            var t = $(this),  
                x = mess.random(-400, 400),
                y = mess.random(-120, 120);
            mess.animate(t, x, y);
            mess.degrees(t);
        });
        $(this).text('Clean Up');
    }, function(){
        li.each(function(){
            mess.animate($(this), 0, 0);
        });
        $(this).text('Make Mess');
        return false;
    });
  
});


default.css
Последний шаг нашего урока. Мы добавим высоту и ширину наших фото:
ul.reset,
ul.reset li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
}
  
/* the main container is centered vertically and horizontally */
.mess {
    position:absolute;
    top:50%;
    left:50%;
    width:220px;
    height:220px;
    margin:-110px 0 0 -110px;
}
  
.mess ul li {
    position:absolute;
    top:0;
    left:0;
    padding:10px;
    width:200px;
    height:200px;
    background:#fff;
}


Вот и все! Я надеюсь, вам понравится. Вы можете оставить комментарий ниже.

Создание сайтов в Санкт Петербурге.
Опубликовал dimas_ua, 14-05-2011, 00:00 Комментариев: 0
 (голосов: 5)