Скролл-эффекты – это тренд, возникший в веб-дизайне несколько лет назад и все еще набирающий обороты. Подойдут для любых фотографий, текста и страниц целиком
<p style="text-align:center">
<MARQUEE direction=up height=250 scrollAmount=2 scrollDelay=20 onmouseover=this.stop() onmouseout=this.start()>
<a href="scrolling.html"><img src="images/foto1.jpeg" width="200" alt="" title=""><br>Пример рис.1</a><br /><br />
<a href="scrolling.html"><img src="images/foto2.jpg" width="200" alt="" title=""><br>Пример рис.2</a><br /><br />
<a href="scrolling.html"><img src="images/foto3.jpg" width="200" alt="" title=""><br>Пример рис.3</a><br /><br />
<a href="scrolling.html"><img src="images/foto4.jpg" width="200" alt="" title=""><br>Пример рис.4</a><br /><br />
<a href="scrolling.html"><img src="images/foto5.jpg" width="200" alt="" title=""><br>Пример рис.5</a><br /><br />
<a href="scrolling.html"><img src="images/foto6.jpg" width="200" alt="" title=""><br>Пример рис.6</a><br /><br />
<a href="scrolling.html"><img src="images/foto7.jpeg" width="200" alt="" title=""><br>Пример рис.7</a><br /><br />
<a href="scrolling.html"><img src="images/foto8.jpg" width="200" alt="" title=""><br>Пример рис.8</a><br /><br />
<a href="scrolling.html"><img src="images/foto9.jpeg" width="200" alt="" title=""><br>Пример рис.9</a><br /><br />
<a href="scrolling.html"><img src="images/foto10.jpg" width="200" alt="" title=""><br>Пример рис.10</a>
</font></MARQUEE> </p>
вертикальный скролинг
<MARQUEE onmouseover=this.stop() onmouseout=this.start()
scrollAmount=2 scrollDelay=0 direction=left width=100% height=150>
<a href="scrolling.html"><img src="images/foto1.jpeg" alt="" width=200 height=150 border=0></a>
<a href="scrolling.html"><img src="images/foto10.jpg" alt="" width=200 height=150 border=0></a>
<a href="scrolling.html"><img src="images/foto5.jpg" alt="" width=200 height=150 border=0></a>
<a href="scrolling.html"><img src="images/foto2.jpg" alt="" width=200 height=150 border=0></a>
<a href="scrolling.html"><img src="images/foto4.jpg" alt="" width=200 height=150 border=0></a>
<a href="scrolling.html"><img src="images/foto3.jpg" alt="" width=200 height=150 border=0></a>
<a href="scrolling.html"><img src="images/foto6.jpg" alt="" width=200 height=150 border=0></a>
<a href="scrolling.html"><img src="images/foto7.jpeg" alt="" width=200 height=150 border=0></a>
<a href="scrolling.html"><img src="images/foto8.jpg" alt="" width=200 height=150 border=0></a>
<a href="scrolling.html"><img src="images/foto9.jpg" alt="" width=200 height=150 border=0></a>
</font></MARQUEE>
горизонтальный скроллинг
<script language="JavaScript1.2">
<!--
var i_scroll=0
var pause=50
var step=0.5
var scrollheight=600
function scrollwindow() {
window.scroll(0,i_scroll)
i_scroll+=step
if (i_scroll >= scrollheight) {i_scroll=0}
var timer= setTimeout("scrollwindow()",pause)
}
window.onload=scrollwindow
//-->
</script>
<style type="text/css">
#mymessage {
width:600px;
height:2000px;
font-family:Arial;
font-size:8pt;
color:FFFFFF;
}
A {
color:FF0000;
}
A:Hover {
font-weight:bold;
color:FFFFFF;
background-color:FF0000;
}
</style>
<div id="mymessage"><p>текст</p></div>
авто прокрутка страницы
<p align="center"><!--webbot bot="HTMLMarkup" startspan --> <marquee id="scroller" scrollAmount=2 direction=up width=200 height=200 style="background-color:lightyellow;border:1px solid black"> <font face="Arial"><small> <p align=justify><img src="images/foto1.jpeg">Красивый водопад. <p align=justify><img src="images/foto2.jpg">Прекрасное озеро. <p align=justify><img src="images/foto3.jpg">Пример природы 3. <p align=justify><img src="images/foto4.jpg">Пример 4. <p align=justify><img src="images/foto5.jpg">Пример 5. </small></font></marquee><br> <b><a href="javascript:scroller.start()">Старт</a> | <a href="javascript:scroller.stop()">Остановить</a></b> <script language="JavaScript1.2">
if (document.all)
scroller.stop()
</script><!--webbot bot="HTMLMarkup"
endspan --></p>
для фото с кнопками
<MARQUEE direction=up height=80 scrollAmount=1 scrollDelay=20 onmouseover=this.stop() onmouseout=this.start()>
<font color="#008060">
текст
</font></MARQUEE>
бегущий вверх
<MARQUEE onmouseover=this.stop() onmouseout=this.start()
scrollAmount=2 scrollDelay=0 direction=left width=20% height=31>
<a href="http://catalogsv-3dn.narod.ru/"><img src="" width="88" height="31" border="0" alt="Скрипты javascript"/></a>
<a href="http://catalogsv.3dn.ru/"><img src= http://catalogsv.3dn.ru/katnov.gif width=88 height=31 border="0" alt="каталог сайтов"></a>
<a href="http://doskabch.at.ua/"><img src= http://doskabch.at.ua/dosca2.gif width=88 height=31 border="0" alt="доска объявлений украина"></a>
</MARQUEE>
для баннеров
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят: Похожие материалы не найдены
| Feedback: 0 | |