Гость !!! | RSS
Сегодня на сайте
Новые сообщения Участники Правила форума Поиск RSS
Страница 1 из 11
Модератор форума: Khufu 
Форум » Скрипты » Эффекты..., трюки... » Эффект растворения элементов на jQuery
Эффект растворения элементов на jQuery
« Dimmon » Дата: Среда, 24 Февраль 2010, 12:40:42 | Сообщение # 1
Любопытные
Dimmon
«Проверенные»
Сообщений: 66
Замечания: ±
Статус Настроения: [редактировать]
Отсутствует

Интересный эффект растворения элементов при помощи jQuery. Использовать его можно в качестве ротатора баннеров, фраз, ссылок и т.п. Все зависит от Вашей фантазии и функциональных потребностей Вашего сайта.

Итак, приступим.

Шаг 1.
Для начала нужно скачать и подключить к документу необходимые скрипты.

Code
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.innerfade.js"></script>

Шаг 2.
Затем между тегами необходимо написать следующий код:
Code
<script type="text/javascript">

$(document).ready(

function(){

$('ul#portfolio').innerfade({

speed: 1000,

timeout: 5000,

type: 'sequence',

containerheight: '220px'

});

$('#news').innerfade({

speed: 1000,

timeout: 5000,

type: 'sequence',

containerheight: '10px'

});

$('.fade').innerfade({

speed: 1000,

timeout: 6000,

type: 'random',

containerheight: '1.5em'

});

});

</script>

В данном случае свойства кода прописаны для всех трех элементов, использующихся в примере. Ненужные можете удалить.

Параметр type указывает на порядок появления элементов: sequence (последовательно) или random (появление в случайном порядке).

Параметр containerheight указывает высоту растворяющегося блока.

Шаг 3.
В нужном нам месте вставим код блока с растворяющимися элементами:
Для картинок это будет следующий код:

Code
<ul id="portfolio">    

<li>

<a href="http://ruseller.com/"><img src="images/ggbg.gif" alt="" /></a>

</li>

<li>

<a href="http://ruseller.com/"><img src="images/whizzkids.gif" alt="" /></a>

</li>    

<li>

<a href="http://ruseller.com/"><img src="images/km.jpg" alt="" /></a>

</li>    

</ul>

При необходимости список может быть продолжен или сокращен.

Для ссылок код будет такой:

    <ul id="news">    

<li>

<a href="#n1">1 Первый текст с ссылкой</a>

</li>

<li>

<a href="#n2">2 Второй текст с ссылкой</a>

</li>    

<li>

<a href="#n3">3 Третий текст с ссылкой</a>

</li>    

<li>

<a href="#n4">4 Четвертый текст с ссылкой</a>

</li>

</ul>

Чтобы избавиться от точек элементов списка, между тегами или в отдельном css файле пропишем стиль:
Code
li {

list-style-type: none;

}

Для элементов в абзацах код будет следующий:
Code
<div class="fade">    

1

</p>

2

</p>

3

</p>

4

</p>

5

</p>

</div>

Область использования такого скрипта очень широкая!

Источник: www.medienfreunde.com


 
Форум » Скрипты » Эффекты..., трюки... » Эффект растворения элементов на jQuery
Страница 1 из 11
Поиск:
мини-чат
Tagis Балаболка
Инфо сайта
Инфо форума

Все права защищены! shalbuzdag-666.ucoz.ru © 2009 – 2017 ()
уЧётчик сайта