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


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

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