Новое в блоге
Loading...
31 дек. 2011 г.

Как добавить плавающий текст к курсору мыши

Здравствуйте друзья! Через несколько часов наступит Новый год. Хочу поздравить читателей моего блога с этим замечательным праздником. Желаю всем всего самого хорошего, что есть на свете. Пусть ваши блоги попадают чаще в топ-10.Теперь поговорим
 о деле. Представляю Вам отличный виджет. Даже затрудняюсь как его правильно назвать. Можно так: как привязать плавающий текст к курсору мыши или как добавить плавающий текст к курсору мыши. Описание виджета,по моему здесь не уместно. Вы сами можете наблюдать его действие сейчас, обратите внимание как ложиться плавно текст за курсором. Великолепный эффект. Давайте приступим к установке виджета в блог.

Как добавить к курсору плавающий текст

Всё очень просто.Заходим в Blogger--Дизайн--Добавить гаджет HTLM/JavaScript и в его поле
вставляем следующий код:

<script language="javascript">
// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='Добро пожаловать в мой блог...';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

Всё. Сохраняем гаджет. Естественно Вы можете менять текст на свой. Также можете показывать этот виджет только на главной странице или только на определённой. Как это делается читайте здесь. Цвет букв подобрать здесь. А если захотите сменить курсор, тогда Вам сюда. Всего доброго. Пока. Не забываем делиться с друзьями и говорить спасибо.

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

10 коммент. :

  1. Спасибо, шикарно! Правда, такой текст слишком длинный :) Поэтому совет другим, выбирайте скорее компактный вариант текста - так и остается привлекательным данный виджет, и одновременно очень экзотично смотрится )

    ОтветитьУдалить
  2. Эффектно смотрится.Да можно и покороче.Как ты успел,я только опубликовал запись?

    ОтветитьУдалить
  3. Не знаю даже почему, но текст не появляется .__.

    ОтветитьУдалить
  4. Если всё правильно сделали,должно работать.

    ОтветитьУдалить
  5. не работает, верняк есть ошибки!

    ОтветитьУдалить

 
Footer