Скрипт подсказки в виде двигающегося текста
В данной теме мы рассмотрим скрипт оригинальной подсказки в виде двигающегося текста, который появляется при наведении курсора мышки на указанный объект.
Ниже Вы можете наблюдать три ссылки, при наведении курсора мышки на которые будут появляться подсказки в виде летающего текста, который будет для каждой ссылки свой.
UsefulScript.ru
Лучшие скрипты
Заходите на форум
При этом количество двигающихся сообщений, их шрифт, цвет, первоначальное положение и скорость перемещения можно изменять.
Если Вы хотите применить на своем сайте такие летающие подсказки, то Вам необходимо скопировать следующий JavaScript код на свою страничку:
<script type="text/javascript">
var fly_true = 0;
var obj = new Array();
var spans = 10;
var num_span = 0;
var pause = 20;
var text_font = new Array("Arial Narrow", "Georgia", "Tahoma", "Times");
var text_style = new Array("normal", "italic");
var text_color = new Array("#FFE4E4", "#FFDCDC", "#FFD4D4", "#FFCCCC",
"#FFC4C4", "#FFBCBC", "#FFB4B4", "#FFACAC", "#FFA4A4", "#FF9C9C");
function rnd(range) {
return Math.floor(range*Math.random());
}
function init() {
for (i=0; i<spans;i++) {
document.write("<span id='span" + i + "'></span>");
obj[i] = document.getElementById("span" + i);
}
}
function fly_message(msg) {
fly_true = 1;
for (i=0; i<spans;i++) {
rnd_top = rnd(209) - 189;
rnd_left = rnd(299) + 149;
rnd_size = rnd(20) + 10;
obj[i].innerHTML="<div style='position: relative;'><span id='spn_fly" + i +
"' style='position: absolute; top: " + rnd_top + "px; left: " + rnd_left +
"px; font-family: " + text_font[rnd(4)] + "; font-size: " + rnd_size +
"px; font-style: " + text_style[rnd(2)] + "; color: " + text_color[rnd(10)] +
";'>" + msg + "</span></div>";
}
fly_spans();
}
function stop_fly() {
for (i=0; i<spans;i++) {
fly_true = 0;
obj[i].innerHTML = "";
}
}
function fly_spans() {
if (fly_true==1) {
var obj_move = document.getElementById("spn_fly" + num_span);
obj_move.style.left = parseInt(obj_move.style.left) + rnd(5) - 2 + "px";
obj_move.style.top = parseInt(obj_move.style.top) + rnd(5) - 2 + "px";
num_span++;
if (num_span>=spans) num_span = 0;
var timer = setTimeout("fly_spans()", pause);
}
else clearTimeout(timer);
}
init();
</script>
Объекты (в нашем случае это ссылки), при наведении на которые следует показывать движущиеся подсказки, следует описывать следующим образом:
<a href="http://UsefulScript.ru/" onMouseover="fly_message('UsefulScript.ru')"
onMouseout="stop_fly()">UsefulScript.ru</a>
<a href="script.php" onMouseover="fly_message('Лучшие скрипты')"
onMouseout="stop_fly()">Лучшие скрипты</a>
<a href="forum/index.php" onMouseover="fly_message('Заходите на форум')"
onMouseout="stop_fly()">Заходите на форум</a>
Как видите, скрипт довольно простой, но в то же время с его помощью можно создать на своем сайте довольно таки не плохой эффект двигающихся подсказок.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.