Скрипт, создающий плавающую надпись
Ниже описанный JavaScript код генерирует плавающую надпись, которая будет находиться в заданных координатах поверх основного текста даже при прокрутке страницы. Таким способом можно добавить, например, меню сайта, которое всегда будет находиться в заданном месте или рекламное объявление.
Опуститесь с помощью скроллинга вниз страницы.
Внимание! Данный пример не будет работать в некоторых браузерах в том случае, если в начале файла со скриптом имеются строки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
или
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Для начала, давайте создадим нашу плавающую надпись и зададим ей необходимый стиль следующим образом:
<div id="floating_sign" style="background:silver; color:blue; border:1px solid red;
padding:7px; position: absolute; width:200px; left:800px; top:200px; z-index: 100">
<div style="text-align:right;">
<span onclick="show_sign()" style="cursor:pointer;">Х</span>
</div>
<b>Пример плавающей надписи.</b><br>
Опуститесь с помощью скроллинга вниз страницы.
</div>Обратите внимание на функцию onclick="show_sign()", которая по нажатию на ссылку позволяет плавающую надпись сделать невидимой (скрыть её).
Далее, для получения эффекта плавающей надписи, вставьте JavaScript код, приведенный ниже, в начало Вашей странички (но после того, как Вы задали стиль надписи):
<script type="text/javascript">
window.onerror = null;
var A, B, C, D, currentY, targetY, scrollTop, topMargin, findHt;
var topMargin = 200;
var slideTime = 900;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
function main() {
if (ns4) {
currentY = document.layers["floating_sign"].top;
scrollTop = window.pageYOffset;
mainTrigger();
}
else if(ns6) {
currentY = parseInt(document.getElementById("floating_sign").style.top);
scrollTop = scrollY;
mainTrigger();
}
else if(ie4) {
currentY = floating_sign.style.pixelTop;
scrollTop = document.body.scrollTop;
mainTrigger();
}
}
function mainTrigger() {
var newTargetY = scrollTop + topMargin;
if ( currentY != newTargetY ) {
if ( newTargetY != targetY ) {
targetY = newTargetY;
Start_floating();
}
animation();
}
}
function Start_floating() {
var now = new Date();
A = targetY - currentY;
B = Math.PI / ( 2 * slideTime );
C = now.getTime();
if (Math.abs(A) > findHt) {
D = A > 0 ? targetY - findHt : targetY + findHt;
A = A > 0 ? findHt : - findHt;
}
else D = currentY;
}
function animation() {
var now = new Date();
var newY = A * Math.sin( B * ( now.getTime() - C )) + D;
newY = Math.round(newY);
if (( A > 0 && newY > currentY )||( A < 0 && newY < currentY )) {
if ( ie4 )document.all.floating_sign.style.pixelTop = newY;
if ( ns4 )document.layers["floating_sign"].top = newY;
if ( ns6 )document.getElementById("floating_sign").style.top = newY + "px";
}
}
function show_sign() {
sign_obj = document.getElementById("floating_sign");
sign_obj.style.visibility = "hidden";
}
window.setInterval("main()", 10);
</script>Данный код отвечает за плавное перемещение плавающего блока и за его скрытие при нажатии на "Х" в правом верхнем углу плавающей надписи.
В результате добавления данного скрипта на свой сайт Вы получите точно такую же плавающую надпись, которую Вы можете наблюдать на данной страничке.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Сам об этом как-то и не подумал.
Проверял на browsershots.org в Firefox 11.0, все работает корректно!
Попробуйте вставить данный код на пустую страничку, чтобы убедиться что работает:
<div style="border:1px solid red; padding:5px; position: absolute; width:190px; left:90px; top:90px;>
Только что проверил тот же код в ie8 - позиция регулируется, но надпись не плавает...