4922
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Не буду предлагать вам GIF , т.к. это потеря четкости и сглаженности. просто решил использовать одну картинку гирлянды в формате PNG, но на странице она будет показываться частями. С помощью скрипта мы заставим менять эти части через определенный интервал. Выглядит все это как простая анимация.
Сам код и стили
Код:
<style type="text/css">
#garland {
position:absolute;
top:0;
left:0;
background-image:url('ваш сайт/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}
</style>
<div id="garland" class="garland_4">
<div id="nums_1">1</div>
</div>
<div style="position:absolute;top:-1000px"></div>
<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>
Вот сама картинка
или так Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Можешь почитать и вот эту статейку "Подключаем интересный вариант слайдера в новость или ваш сайт"
Это тоже интересно
21.01.15Основы отзывчивого веб-дизайна
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.