34
103
Летающий за курсором текст или фраза
Недавно мы рассмотрели скрипт Летающего текста или фразы. В том скрипте текстовая строка просто летала по синусоиде в определенном месте странички. Теперь давайте рассмотрим JavaScript код, который заставляет летать текст или фразу за курсором мышки.
Переместите курсор мышки по экрану, и Вы увидите, что на данной страничке текстовая строка с доменным именем нашего сайта следует за курсором.
Для получения точно такого же эффекта летающего за курсором текста вставьте на свой сайт следующий JavaScript код:
JavaScript код:
<script type="text/javascript">
var text = "http://UsefulScript.ru";
var gap = 10;
var the_text = new Array();
var text = text.split("");
var xx = 0;
var yy = -999;
var txt = "";
for(i=1; i<=text.length; i++){
txt += '<b id="text' + i + '" style="position:absolute; width:' + gap +
'; visibility:visible; color:#CC0000; top:-99px;">' + text[i-1] + '</b>';
}
document.write(txt);
function move_letter(letter, left, top){
letter.style.left = left + "px";
letter.style.top = top + "px";
}
function flying_text(evt){
xx = 15 + evt.pageX;
yy = 10 + evt.pageY;
}
function what_left(id){
return parseInt(id.style.left);
}
function what_top(id){
return parseInt(id.style.top);
}
function move_string(){
for(n=text.length; n>1; n=n-1){
if(what_left(the_text[n-1]) + gap*2>=(window.innerWidth + pageXOffset)){
move_letter(the_text[n-1], 0, -999);
move_letter(the_text[n], 0, -999);
}
else move_letter(the_text[n], what_left(the_text[n-1]) + gap, what_top(the_text[n-1]));
}
move_letter(the_text[1], xx, yy);
}
window.onload=function(){
for(n=1; n<=text.length; n++) the_text[n] = document.getElementById("text" + n);
document.onmousemove = flying_text;
setInterval("move_string()", 25);
}
</script>Как видите, данный скрипт совсем прост в установке и настройке, правда использовать его стоит с осторожностью, т.к. не всем посетителям Вашего сайта может понравиться подобный летающий за курсором текст.
Дата создания: 19:14:21 18.12.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 9623 раз(а).
Комментарии посетителей (2 шт.):
alyakskav
# 1589(22:22:50 12.04.2014 г.)
Бонжур! Мне скрипт очень понравился, но почему у меня работает только в шапке, а вниз на страницу не перемещается.
Ответить
Елена
# 2608(17:06:38 07.08.2015 г.)
Простите, а куда ставить скрипт на сайте юкоз?
Ответить
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.