главная

Теги:


SlideitMoo - 3 красивых решения для Вашего сайта

Данный урок втройне полезней и интересней, чем любой другой урок, так как прочитав его до конца, Вы сможете создать на своем сайте три разных красивых эффекта.

1. Красивый слайдер
Для корректной работы нам необходимо:
а) Три внешних файла (2 из них с кодом фреймворка MooTools). Не забудьте исправлять путь к файлам, если меняете их расположение. Следующий код необходимо вставить между тегами :

    
    

б) Javascript код с настройками в начале документа сразу после верхнего кода также между .

 
В этих настройках можно задать ширину слайдера, количество видимых элементов и включить или выключить контроллеры слайдера. Более подробно про настройки в конце урока.
в) Код HTML для оформления внешнего вида слайдера

1: Address Nam porta tellus ac urna

2: Ads

Praesent pellentesque eros nec nisl

3: Calendar Vestibulum eleifend scelerisque purus

4: Comment Felis nulla iaculis lacus

5: Home

Quisque neque. Donec quam ante, pulvinar vitae

6: Mail Suspendisse sodales turpis. Aliquam lectus

7: News Praesent pellentesque eros nec nisl
8: RSS

Nam porta tellus ac urna

9: Search Praesent pellentesque eros nec nisl

10: Sign Vestibulum eleifend scelerisque purus
Не забудьте поменять ссылки и пути к картинкам под Ваши нужды.
Ну и само собой необходимо все оформить через CSS. В нашем случае все стили находятся во внешнем файле, который подключен в самом начале документа.
  
2. Ротатор баннеров или изображений
Нам понадобится:
а) Внешние файлы с Mootools - см. 1 пример.
б) Javascript код с настройками в начале документа сразу после верхнего кода также между .

в) HTML

Стили оформления находятся во внешнем файле (см. пример 1)
3. Ротатор с текстом и изображениями
Нам понадобится:
а) Внешние файлы с Mootools - см. 1 пример.
б) Javascript код с настройками в начале документа сразу после верхнего кода также между .

в) HTML

Chained drop down boxes, the neat way

Ever had a problem displaying the relationships of hierarchical data? Tons of drop downs displaying data according to what the user selected? Not any more. ChainedSelect comes to your aid with a neat display of your data. Easy to use and to implement. more details

MooTools and SiFR - cool, antialiased text

Tired of the same boring look of your text? With the help of this script, your titles will look neat! Try it out. more details

MooHover - cool looking links and buttons

How about some cool hover effects on your links and buttons? You want it? You got it! more details

MooTools image zoom

Got really large images that your client wants you to use? No room in the page for them? Need a solution? Got one! Go get it tiger! more details
Стили оформления находятся во внешнем файле (см. пример 1).
  •   Теперь давайте посмотрим какие настройки можно использовать при оформлении всех плагинов:
  •   itemsVisible: количество видимых элементов
  •   itemsSelector: класс CSS для подвижных элементов
  •   showControls: показывает или скрывает навигацию (кнопки "вперед" и "назад")
  •   duration: продолжительность перехода
  •   direction: направление движения (1 - справа налево, -1 - наоборот)
  •   autoSlide: время в милисекундах через которое начнется прокрутка
Это основные и самые необходимые настройки. Их на самом деле больше, но этого вполне достаточно. Экспериментируйте и у Вас все получится!
Удачного Вам дня. На сегодня все!

Источник урока: www.php-help.ro

 

 

Урок Создан:2011-02-10 Просмотров:7900

Добавить комментарий:


Copyright© 2009 Hosted by Zhost