Эффект для рекламы 125x125


Эффект для рекламы 125x125

1091
6 из 10
Проголосовало: 3






Подключаем jQuery в HEAD сайта где будут находиться баннера.

Code
<script src="http://webo4ka.ru/Ucoz4/jquery-1.3.1.min.js"></script>  
  <script src="http://webo4ka.ru/Ucoz4/jquery.easing.1.3.js"></script>


Если данные библиотеки уже подключены их дважды подключать не нужно.

Далее сам код JS который отвечает за эффект

Code
<script>  
  $(document).ready(function() {  
  var style_in = 'easeOutBounce';  
  var style_out = 'jswing';  
  var speed_in = 1000;  
  var speed_out = 300;  
  var neg = Math.round($('.qitem').width() / 2) * (-1);  
  var pos = neg * (-1);  
  var out = pos * 2;  
  $('.qitem').each(function () {  
  url = $(this).find('a').attr('href');  
  img = $(this).find('img').attr('src');  
  alt = $(this).find('img').attr('img');  
  $('img', this).remove();  
  $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');  
  $(this).children('div').css('background-image','url('+ img + ')');  
  $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});  
  $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});  
  $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});  
  $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});  
  }).hover(function () {  
  $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});  
  $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});  
  $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});  
  $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});  
  },  
  function () {  
  $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});  
  $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});  
  $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});  
  $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});  
  }).click (function () {  
  window.location = $(this).find('a').attr('href');  
  });  
  });  
  </script>


Это в Ваш CSS :

Code
.qitem {width:125px;height:125px;border:4px solid #222;margin:2;background: url('http://webo4ka.ru/Ucoz4/effekt_dli_reklami125.gif') no-repeat;overflow:hidden;cursor:hand;position:relative;float:left;cursor:pointer;}  
  .qitem img {border:0;position:absolute;z-index:200;}  
  .qitem .caption {position:absolute;z-index:0;color:#ccc;display:block;}  
  .qitem .caption h4 {font-size:14px;padding:10px 5px 0 8px;margin:0;color:#CCD718;}  
  .qitem .caption p {font-size:12px;padding:3px 5px 0 8px;margin:0;}  
  .topLeft, .topRight, .bottomLeft, .bottomRight {position:absolute;background-repeat: no-repeat;float:left;}  
  .topLeft {background-position: top left;}  
  .topRight {background-position: top right;}  
  .bottomLeft {background-position: bottom left;}  
  .bottomRight {background-position: bottom right;}


Сам код для баннера :

Code
<div class="qitem">  
  <a href="http://webo4ka.ru/"><img src="http://webo4ka.ru/Ucoz4/effekt_dli_reklami125cbfd05f8effc.png" width="125" height="125"/></a>  
  <span class="caption"><h4>webo4ka.ru</h4><p>Макет и Верстка, разработка сайтов, только для uCoz конструктора.</p></span>  
  </div>  
   
  <div class="qitem">  
  <a href="http://webo4ka.ru/"><img src="http://webo4ka.ru/Ucoz4/effekt_dli_reklami125125X125-v3.png" width="125" height="125"/></a>  
  <span class="caption"><h4>webo4ka.ru</h4><p>Только новые, и только уникальные скрипты для uCoz системы.</p></span>  
  </div>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://up-script.ru
  • Всего комментариев: 6

FreeMan:D
0
FreeMan:D написал: Написано 08 Сентября 2011 в 18:30
Комментарий №6
Ага

Вовчик
0
Вовчик написал: Написано 07 Сентября 2011 в 18:01
Комментарий №3
Картинка размером 125, делится на 4 квадратика и раздвигается по углам при наведении, когда убираешь мышку, картинка возвращается на место

oXe0nuS
0
oXe0nuS написал: Написано 07 Сентября 2011 в 18:08
Комментарий №4
Теперьясно спс

Kavrasky
0
Kavrasky написал: Написано 08 Сентября 2011 в 16:34
Комментарий №5
Благодарочка =)

oXe0nuS
0
oXe0nuS написал: Написано 07 Сентября 2011 в 17:57
Комментарий №2
Да Да какой

Kavrasky
0
Kavrasky написал: Написано 07 Сентября 2011 в 17:52
Комментарий №1
А какой эффект то применяется?

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: