Кот на сайт для uCoz
827материалов
228тем на форуме
3004комментария
6157пользователей

Кот на сайт для uCoz


Появление персонажей на сайте – не редкость, особенно популярно украшать сайты кошками, которые следят за перемещением курсора, а некоторые даже пытаются поймать курсор. Был у нас и такой. Этого кота можно установить на любой сайт, сделанном на uCoz. Он будет скромно наблюдать за действиями пользователей на сайте. Когда пользователь наведет курсор на кота, он будет застенчиво улыбаться и смотреть вверх.

Установка

Вставьте в Нижнюю часть сайта или в любой другой глобальный блок:
Код
<div id="cat">   
   <div class="cat-paws"></div>   
   <div class="cat-itself-wrap">   
   <div class="cat-itself">   
   <div id="cat-eye-left" class="cat-eye">   
   <div class="cat-eyeball"></div>   
   </div>   
   <div id="cat-eye-right" class="cat-eye">   
   <div class="cat-eyeball"></div>   
   </div>   
   </div>   
   </div>   
   </div>   
   </div>   
   </div>   
   <script>   
   $(function() {   
   var el1 = $('#cat-eye-left'), eyeBall1 = el1.find('div');   
   var el2 = $('#cat-eye-right'), eyeBall2 = el2.find('div');   
   el1.show();   
   el2.show();   
   var x1 = el1.offset().left + 37, y1 = el1.offset().top + 15;   
   var r = 6, x , y, x2, y2, isEyeProcessed = false;   
   $('body').mousemove(function(e) {   
   if (!isEyeProcessed) {   
   isEyeProcessed = true;   
   var x2 = e.pageX, y2 = e.pageY;   
     
   y = ((r * (y2 - y1)) / Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))) + y1;   
   x = (((y - y1) * (x2 - x1)) / (y2 - y1)) + x1;   
     
   eyeBall1.css({   
   marginTop: (y - y1 + 1) + 'px',   
   marginLeft: (x - x1) + 'px'   
   });   
   eyeBall2.css({   
   marginTop: (y - y1 - 1) + 'px',   
   marginLeft: (x - x1) + 'px'   
   });   
   isEyeProcessed = false;   
   }   
   });   
     
   $('#cat').mousemove(function(e) {   
   e.stopPropagation();   
   return false;   
   });   
     
   });   
   </script>

Вставьте следующий код в Таблицу стилей (CSS):
Код
right: 0;   
   bottom: -4px;   
   width: 132px;   
   height: 33px;   
   z-index: 2;   
   background: url(http://webmaster-ucoz.ru/ucoz/1/1/1/cat-paws.png) no-repeat right bottom;   
   }   
   .cat-itself-wrap {   
   position: fixed;   
   width: 100%;   
   height: 100%;   
   z-index: 1;   
   }   
   .cat-itself {   
   position: fixed;
   left: 0;   
   bottom: 0;   
   width: 125px;   
   height: 55px;   
   z-index: 0;   
   background: url(http://webmaster-ucoz.ru/ucoz/1/1/1/cat-itself.png) no-repeat;   
   -webkit-transition: all 0.1s 0.1s ease-out;   
   transition: all 0.1s 0.1s ease-out;   
   }   
   .cat-eye {   
   position: absolute;   
   display: none;   
   width: 28px;   
   height: 28px;   
   background: url(http://webmaster-ucoz.ru/ucoz/1/1/1/cat-eye.png);   
   }   
   .cat-eyeball {   
   position: absolute;   
   left: 7.5px;   
   top: 7.5px;   
   width: 13px;   
   height: 13px;   
   background: url(http://webmaster-ucoz.ru/ucoz/1/1/1/cat-eyeball.png);   
   }   
   #cat-eye-left {   
   left: 25px;   
   top: 23px;   
   }   
   #cat-eye-right {   
   left: 74px;   
   top: 26px;   
   }

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 18.11.2014 в 18:39
Материал просмотрен: 1996 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 12 комментариев

Пожаловаться
Сказать спасибо

12 комментариев


Rita
Рита @Rita 19.11.2014 20:261
0
Классный котик biggrin
kkott
при прокрутке страницы кот всегда вниз смотрит. как исправить?
kkott
исправил сам. надо заменить строку
var x2 = e.pageX, y2 = e.pageY;
на строку
var x2 = e.clientX, y2 = e.clientY;
kkott
еще, в коде два лишних закрывающих дива </div> в конце. надо убрать.
Ромчик
Хорошо, поправлю
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта