Глаза за курсором

картинка смотрим праздник

Категории в разделе Эффекты :

Информация о материале: Категория: Эффекты для курсора; Просмотров: 52

№ - 4 Эффект « Глаза за курсором »

Скрипт для сайта с следящими за курсором глазами.

Классный , запоминающийся эффект для выделения странички и привлечения внимания посетителей с моргающими глазами непрерывно следящими за стрелочкой курсора.

Скрипт состоит из двух частей , одна из которых должна размещаться в <head >...</head > , а вторая в <body >...</body > - в том месте где хотите показать картинку или размещаем коды один под другим - сначала скрипт под ним код для показа изображения.

Следящие глазки за курсором.

Смотреть пример

Скопировать код

<SCRIPT>
// Defaults
var jseyesimg="https://effects1.ru/images/primer-img/cursor/4-glaza-za-kursorom/golova.png";//голова
var jseyeimg="https://effects1.ru/images/primer-img/cursor/4-glaza-za-kursorom/glaz.gif";//глаза
var jseyeslink="https://effects1.ru/effekty";// ССЫЛКА НА СТРАНИЧКУ

// Internal
var jseyeso=null, jseye1=null, jseye2=null;

// Browser detection
// Global variables
var browserversion=0.0;
var browsertype=0; // 0: unknown; 1:MSIE; 2:NN

// Return true if MSIE or NN detected
function browserdetect() {
  var agt= navigator.userAgent.toLowerCase();
  var appVer= navigator.appVersion.toLowerCase();
  browserversion= parseFloat(appVer);
  var iePos= appVer.indexOf('msie');
  if (iePos!=-1) browserversion= parseFloat(appVer.substring(iePos+5, appVer.indexOf(';',iePos)));
  var nav6Pos = agt.indexOf('netscape6');
  if (nav6Pos!=-1) browserversion= parseFloat(agt.substring(nav6Pos+10))
  browsertype= (iePos!=-1) ? 1 : (agt.indexOf('mozilla')!=-1) ? 2 : 0;
  return(browsertype>0);
}

browserdetect();

// General utils

// Find object by name or id
function jseyesobj(id) {
  var i, x;
  x= document[id];
  if (!x && document.all) x= document.all[id];
  for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
  if (!x && document.getElementById) x= document.getElementById(id);
  return(x);
}

// Move eyes
function jseyesmove(x, y) {
  var ex, ey, dx, dy;
  if (jseyeso && jseye1 && jseye2 && jseyeso.style) {
    ex=jseyeso.offsetLeft+46; ey=jseyeso.offsetTop+58;
    dx=x-ex; dy=y-ey;
    r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
    jseye1.style.left= r*dx+36.5; jseye1.style.top= r*dy+44;
    ex+=56; dx-=56;
    r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
    jseye2.style.left= r*dx+92.5; jseye2.style.top= r*dy+44;
  }
}

// Main
function jseyes() {
  var img;
  var x, y, a=false;

if (arguments.length==2) {
    x= arguments[0];
    y= arguments[1];
    a= true;
  }

if (browsertype>0 && browserversion>=5) {
      img= "<a href='"+jseyeslink+"' target='_blank'>"+"<div id='jseyeslayer' style='position:"+
           (a ? "absolute; left:"+x+"; top:"+y : "relative")+
           "; z-index:5; width:150; height:150 overflow:hidden'>"+
	     "<div id='jseye1' style='position:absolute; left:36; top:44; z-index:6; width:21; height:29'>"+
	       "<img src='"+jseyeimg+"' width=21 height=29>"+
	     "</div>"+
	     "<div id='jseye2' style='position:absolute; left:92; top:44; z-index:6; width:21; height:29'>"+
	       "<img src='"+jseyeimg+"' width=21 height=29 >"+
	     "</div>"+
	     "<img src='"+jseyesimg+"' width=160 height=160 >"+"<span class='font-18' id='fon-2'>Ваш текст , если нужно!</span>"+"</a>"+
	 "</div>";
    document.write(img);
    jseyeso=jseyesobj('jseyeslayer');
    jseye1=jseyesobj('jseye1');
    jseye2=jseyesobj('jseye2');

switch (browsertype) {
      case 1:
        document.onmousemove=jseyesmousemoveIE;
	break;
      case 2:
        document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove=jseyesmousemoveNS;
	break;
    }
  }
}

// Mouse move events
function jseyesmousemoveNS(e) {
  jseyesmove(e.pageX, e.pageY);
  //return(false);
}
function jseyesmousemoveIE() {
  jseyesmove(event.clientX+document.body.scrollLeft, event.clientY+document.body.scrollTop);
  //return(false);
}
</SCRIPT>

</style>  
<SCRIPT>
    jseyes();
</SCRIPT>

~ Меняем картинку лица - var jseyesimg="голова.png";
~ Изменить картинку глаз - var jseyeimg="глаз.gif";
~ Заменить ссылку на свою - var jseyeslink="https://effects1.ru/effekty";
~ Для показа эффекта в одном положении при прокрутке страницы заменить в строке - (a ? "absolute; left:"+x+"; top:"+y : "relative") на fixed
~ Заменить или убрать текст - "<span class='font-18' id='fon-3'>Ваш текст , если нужно!</span>"+
Для замены напишите свой текст. Без текста строку , начиная с символов "<span и заканчивая </span>"+ вместе с плюсиком - убрать.

Создайте текстовый документ .txt --> Копируем код в форме и вставляем в файл .txt --> Переименуйте файл в .HTML ---> Откройте с помощью браузера и увидите результат.

Что скажете?

Картинки и ссылки
Для сохранения картинки на компьютер наведите курсор на рисунок , сделайте клик правой кнопкой мышки и в выпавшем окне выберите пункт : Сохранить изображение как...

Для получения ссылка на картинку , наведите курсор на рисунок , сделайте клик правой кнопкой мышки и в выпавшем окне выберите пункт: Копировать адрес изображения

Для просмотра оригинала картинки , наведите курсор на рисунок , сделайте клик правой кнопкой мышки и в выпавшем окне выберите пункт: Открыть изображение в новой вкладке или Открыть исходное изображение в новой вкладке.

Интересно:

HTML и BB код на картинку

Оставить комментарий

Генератор для просмотра нескольких картинок вместе

Красиво написанные названия праздников на прозрачном фоне.

Клипарт png, картинки gif, паттерны, фоны, текстуры .

Январь Февраль Март Апрель Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь

Глаза за курсором

Скрипт для сайта с следящими за курсором глазами.

Классный , запоминающийся эффект для выделения странички и привлечения внимания посетителей с моргающими глазами непрерывно следящими за стрелочкой курсора.

Смотреть пример

Обновление :

Для победителя | Новый год | Удачи |

Категории с примерами :

Облака, тучи(паттерн) | Мрамор(паттерн) | С Рождением внучки | С Рождением Племянника | С Рождением племянницы | Бенедикт | Бенедикт - текст | Арина |

Красиво написанные названия праздников на прозрачном фоне.

Клипарт png, картинки gif, паттерны, фоны, текстуры .

10 Популярных материалов

Информация о разделах

Файлы готовятся к загрузке:

Последние добавленные :

картинки png , jpg , gif:

Скромница | Попугайчик (мульт) | Ёжики (мульт) Будущая мама, Беременная (мульт) | Художник (мульт) | Брачующиеся Свадьба (мульт) | Палатка | Трава | | |

Праздники:

Дата - год -цифры | Шаблон Эскиз открытки | День проектировщика | День гражданской авиации | День пьяного ёжика | Новый год Лошади | День художника | | | | |

День Рождения , Юбилей :

39 лет - ДР | 40 лет - ДР | | |

Богдана - текст | Божена | Божена - текст | Бьянка | Бьянка - текст | | | | |

Разное:

Выходной | Давай помиримся | Весы | Скорпион |
Движение фрагмента | Рамка-border | Эффект курсора |

Инфа:

Ваш комментарий:

Глаза за курсором

Скрипт для сайта с следящими за курсором глазами.

Классный , запоминающийся эффект для выделения странички и привлечения внимания посетителей с моргающими глазами непрерывно следящими за стрелочкой курсора.

Смотреть пример

Обновление :

Для победителя | Новый год | Удачи |

Категории с примерами :

Облака, тучи(паттерн) | Мрамор(паттерн) | С Рождением внучки | С Рождением Племянника | С Рождением племянницы | Бенедикт | Бенедикт - текст | Арина |

Красиво написанные названия праздников на прозрачном фоне.

Клипарт png, картинки gif, паттерны, фоны, текстуры .

10 Популярных материалов

Информация о разделах

Файлы готовятся к загрузке:

Последние добавленные :

картинки png , jpg , gif:

Скромница | Попугайчик (мульт) | Ёжики (мульт) Будущая мама, Беременная (мульт) | Художник (мульт) | Брачующиеся Свадьба (мульт) | Палатка | Трава | | |

Праздники:

Дата - год -цифры | Шаблон Эскиз открытки | День проектировщика | День гражданской авиации | День пьяного ёжика | Новый год Лошади | День художника | | | | |

День Рождения , Юбилей :

39 лет - ДР | 40 лет - ДР | | | Богдана - текст | Божена | Божена - текст | Бьянка | Бьянка - текст | | | | |

Разное:

Выходной | Давай помиримся | Весы | Скорпион | Движение фрагмента | Рамка-border | Эффект курсора |

Инфа:

Ваш комментарий:

39 лет - ДР | 40 лет - ДР | | |

Богдана - текст | Божена | Божена - текст | Бьянка | Бьянка - текст | | | | |

Выходной | Давай помиримся | Весы | Скорпион |
Движение фрагмента | Рамка-border | Эффект курсора |