Путешествуя по Интернету, вы обнаружите, что Интернет – это не только океан информации, но и океан рекламы. Помимо обычных Gif-баннеров и Flash, плавающая реклама в настоящее время также является одной из наиболее популярных форм рекламы в Интернете. Когда вы перетаскиваете полосу прокрутки браузера, такая плавающая реклама на странице может перемещаться вместе с экраном. Хотя этот эффект имеет значительную практическую ценность для показа рекламы, для людей, просматривающих вашу веб-страницу, это одновременно мешает чтению и влияет на интерес к чтению, поэтому им нельзя злоупотреблять. Однако, если использовать его с умом, он может оказаться чрезвычайно полезным.
Создать эффект плавающей рекламы несложно. Если у вас есть базовые знания JS, вы можете написать его самостоятельно. Если лень писать, скачайте в Интернете инструмент для создания спецэффектов и вставьте код по запросу. Однако, если вы хотите по-настоящему понять, как это делается, вам необходимо овладеть некоторыми знаниями JS. Здесь я познакомлю вас с простым методом плавающей рекламы.
Следующий код можно поместить между <body></body>, в ходе которого я добавил несколько комментариев (т. е. текст после «//» и текст между «<!—» и «-->»).
<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
initAd();//После загрузки страницы вызываем функцию initAd()
</СКРИПТ>
<script Language="JScript">
<!--
функция initAd() {
document.all.AdLayer.style.posTop = -200;//Устанавливаем положение рекламного слоя относительно фиксированного направления y после запуска события onLoad.
document.all.AdLayer.style.visibility = 'visible'//Установить видимость слоя
MoveLayer('AdLayer');//Вызов функции MoveLayer()
}
функция MoveLayer(layerName) {
var x = 600; // Плавающий рекламный слой фиксируется в положении браузера по оси X.
var y = 300 // Плавающий рекламный слой зафиксирован в направлении y браузера.
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + LayerName + ".style.posTop = y");
eval("document.all." + LayerName + ".style.posLeft = x");//Слой мобильной рекламы
setTimeout("MoveLayer('AdLayer');", 20);//Устанавливаем 20 миллисекунд перед вызовом функции MoveLayer()
}
//-->
</скрипт>
<!--Ниже приведен слой с идентификатором AdLayer (если идентификатор не AdLayer, AdLayer в MoveLayer() выше также необходимо соответствующим образом изменить), включая изображение со ссылкой -->
<div id=AdLayer style='position:absolute; width:61px; z-index:20; left: 600px; top: 300px'>
<a href=" http://www.5dmedia.com/bbs"><img src='../qqkk2000.gif' border="0" height="60" width="60"></a>
</div>
Здесь вы можете установить значения x и y, чтобы установить положение фиксированного слоя, и изменить значение 20 в setTimeout("MoveLayer('AdLayer');", 20) на значение, которое вы хотите вызвать временной интервал MoveLayer(). Также следует отметить, что используемое изображение предпочтительно представляет собой GIF-файл с прозрачным фоном, чтобы цвет фона изображения не закрывал содержимое, находящееся за ним.
Помните, используйте плавающую рекламу с осторожностью. Рассматривая использование спецэффектов, вы также должны учитывать чувства зрителя и не злоупотреблять ими!