Эффекта при наведении мышки на изображение


Эффекта при наведении мышки на изображение

1240
7.2 из 10
Проголосовало: 5




Всем доброе время суток!

И так сегодн днемм зашол на один и сайтов инета и увидел очень интересный эффект с фото...

Даня функция економит очень много мееста на вашем "сайте" ...

Не будуу уклвнятся вв подробности прриступимм к установке даной модификации!

Установка

между:

<head>

</head>

Code

<link rel="stylesheet" href="http://vk-online.do.am/test_portal/webo4ka_ru/effect_photo_1/css/reset.css" />

  <link rel="stylesheet" href="http://vk-online.do.am/test_portal/webo4ka_ru/effect_photo_1/css/style.css" />

<script type="text/javascript" src="http://vk-online.do.am/test_portal/webo4ka_ru/effect_photo_1/javascript/lekus.js"></script>

<script type="text/javascript">
  $(function() {
$(".slideBox").hover(function(){
  $(this).find("img").stop().animate({
  top:-325
  }, 500);
}, function(){
  $(this).find("img").stop().animate({
  top:0
  }, 500);
});
  });

  </script>


после

<body>

вставляем:

Code

<div id="container">
   
  <div class="slideBox">
  <img src="АДРЕС ВАШЕГО ФОТО" alt="testing" />
   
  <div class="content">
  <h1>Название заголовка</h1>
  <p><strong>Ведите свой текст......</p>
  </div>
   
  </div>
  </div><!--end slideBox-->
   
  <div class="slideBox">
  <img src="АДРЕС ВАШЕГО ФОТО" alt="testing" />

  <div class="content">
  <h1>Название заголовка</h1>
  <p><strong>Ведите свой текст......</p>
  </div>

  </div>
  </div><!--end slideBox-->
   
  </div><!--end container-->
   


И так если вы хотите чтоб фото чуть-чуть приподнималось, на определенную высоту?)

Code

"" <script type="text/javascript"> $(function() { $(".slideBox").hover(function(){ $(this).find("img").stop().animate({ top:-325 }, 500); },  

function(){ $(this).find("img").stop().animate({ top:0 }, 500); }); }); </script>""



Там где цифра -325 стоит меняй на какую надо, знак минуса оставляй обязательно и всё будет хорошо.Этот код находится между тегами

<head>

</head>

Пользуйтесь наздорове...

Посмотреть демо можно - ЗДЕСЬ
Автор публикации: Загрузка
Загрузка
LeKcUs, это его n материал
Источник: http://vk-online.do.am
  • Всего комментариев: 3

Timon4ik
0
Timon4ik написал: Написано 30 Октября 2011 в 08:05
Комментарий №3
LeKcUs, здравствуйте, помогите мне сделать, пожалуйста:
1) чтобы сначала была картинка, а при наведении появлялся текст.
2) скругленные края.
Заранее буду благодарен! biggrin

vover6
-2
vover6 написал: Написано 21 Сентября 2011 в 13:17
Комментарий №1
Вован ты бы хоть текст на русский перевел biggrin

LeKcUs
-1
LeKcUs написал: Написано 21 Сентября 2011 в 13:28
Комментарий №2
не понял? dry

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2106
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 430
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • Спасибо... А вот насчет "Но вот баги" можно поконкретнее???
  • CbIPoK2513 написал:
  • Интересная задумка и реализация.. Но вот баги.. А так хорошо.
  • LeKcUs написал:
  • Запомни раз и на всегда... Все файлы ВСЕ с окончанием .swf пишутся в Adobe Flash. Я лично пишу в Adobe Flash CS6 cool Я скоро выложу новый шаблон более интересный...
  • Winston888 написал:
  • Я с флешь не сталкивался поэтому интересно файл main.swf ты сам писал ? Если да то через что ?
  • LeKcUs написал:
  • Я думаю что следующая версия будет по дизайну лучше! Ждите.... cool
    Последние темы
    Опрос
    416
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 3
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: