Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Новогодняя гирлянда
Новогодняя гирлянда
AndreyДата: Пятница, 20.12.2013, 10:39:04 | Сообщение # 1
Технарь
Offline
3

Простая, симпатичная, мигающая новогодняя гирлянда

Мой тест на Фидле

Для начала идём в CSS и прописываем:
Код
#garland {position:absolute;top:0;left:0;background-image:url('/garland/christmas-lights.png');height:36px;width:100%;overflow:hidden;z-index:99}    
    #nums_1 {padding:100px}    
    .garland_1 {background-position: 0 0}    
    .garland_2 {background-position: 0 -36px}    
    .garland_3 {background-position: 0 -72px}    
    .garland_4 {background-position: 0 -108px}


Теперь там где хотите видеть гирлянду, между <body> и </body> прописываем ДИВЫ которые и будут её выводить:
Код
<div id="garland" class="garland_4"><div id="nums_1">1</div></div>


И в конце после </body> прописываем скрипт которые будет создавать мерцание нашей гирлянде:
Код
<script type="text/javascript">    
    function garland() {    
    nums = document.getElementById('nums_1').innerHTML    
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}    
if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}    
if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}    
if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}    
}    

setInterval(function(){garland()}, 600)    
</script>


Картинку из прикреплённого ниже архива заливаем к себе на хост в папку "garland"

Вот и всё!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Новогодняя гирлянда
Страница 1 из 11
Поиск: