InnerFade - эффект растворения элементов на jQuery, как текство так и картинок. И так приступим:
Для начала нужно скачать и подключить к документу необходимые скрипты.
<script type=”text/javascript” src=”src/jquery.js”></script>
<script type=”text/javascript” src=”src/jquery.innerfade.js”></script>
Затем между тегами необходимо написать следующий код:
<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 указывает высоту растворяющегося блока.
В нужном нам месте вставим код блока с растворяющимися элементами:
Для картинок это будет следующий код:
<ul id=”portfolio”>
<li>
<a href=”http://domain.com/”><img src=”images/ggbg.gif” alt=”" /></a>
</li>
<li>
<a href=”http://domain.com/”><img src=”images/whizzkids.gif” alt=”" /></a>
</li>
<li>
<a href=”http://domain.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>
Ну вот и все! Область использования такого скрипта очень широкая! Надеюсь он получит свое отражение и на Ваших сайтах.
Теперь буду думать как использовать его в связке с ctrotator`ом или вместо него.
Спонсоры поста:
Выставочное оборудование
Раскрутка web сайтов