Меню
Отдохни на нашем сайте
Странички на заметку
Анекдот в студию!!!
Управляемая бегущая строка, гусеничное изображение
Создавая свой сайт, начинающие сайтостроители по разному видят его в действительности. Некоторые просто хотят попробовать свои силы в новом деле, кому-то сайт нужен для рекламы своего товара, кто-ко хочет иметь свою рекламную площадку, а кто-то хочет научиться делать сайты для продажи. В любом случае сайт нужно делать с привлекательным дизайном, функциональным и и удобным для себя и для пользователей, которые будут на него заходить. Кто-то любит сайты статические не подвижные, кто-то хочет разместить на своём сайте побольше различных подвижных элементов, привлекающих внимание.
В эой статье я хочу привести пример использования оригинального скрипта повышающий привлекательность и оригинальность сайту. Ниже вы видите пример использования такого скрипта.
Чтобы управлять бегущей строкой или движущимся изображением, достаточно навести не него курсор и переместить его влево или вправо. Установка этого скрипта не сложная, нужно немного усидчивости и внимания
Если вы решили установить этот скрипт себе на сайт, то скачайте архив, распакуйте его и полученный файл сохраните как crawler.js, и загружаете его в корень сайта.
После этого, скопируйте нижеприведённый файл
и вставляем его перед </head>
Далее копируем следующий файл, приведённый ниже, и устанавливаем его в то место, где Вы хотели бы его видеть.
<div class="marquee" id="mycrawler">
<a href="http://сайт cылки.ru"><font color="FF0000">Ваша ссылка</font></a>
<a href="http://сайт cылки.ru"><font color="00CC00">Ваша ссылка</font></a>
<a href="http://сайт cылки.ru"><font color="0000FF">Ваша ссылка</font></a>
<a href="http://сайт cылки.ru"><font color="00FFFF">Ваша ссылка</font></a>
</div>
<br>
<br>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '580px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 8, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>
</div>
<div class="marquee" id="mycrawler2">
<a href="http://адрес картинки1"><img src="http://Ваш сайт/Ваша картинка1" /></a>
<a href="http://адрес картинки2"><img src="http://Ваш сайт/Ваша картинка2" /></a>
<a href="http://адрес картинки3"><img src="http://Ваш сайт/Ваша картинка3" /></a>
<a href="http://адрес картинки4"><img src="http://Ваш сайт/Ваша картинка4" /></a>
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '580px',
'height': '210px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script>
Далее редактируем этот файт под себя, и вот оно готово.
По материалам сайта http://www.dynamicdrive.com/forums/
Сайт своими руками
Веб-мастеру
Поиск
Странички истории
|
 |
 |
 |
