Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.17.110.42
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Эффект при наведении мышки на изображение
Сообщение оставлено 21.09.2011 в 15:15:33 | Сообщение #1
Скрин: http://host-images.ru/images/88589683.jpg

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

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

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

Установка

между:





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>

после



вставляем:

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 стоит меняй на какую надо, знак минуса оставляй обязательно и всё будет хорошо.Этот код находится между тегами





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

Описание писал не я, так что не думайте... grin

Источник: vk-online.do.am
 
 
   
Сообщение оставлено 29.09.2011 в 16:49:27 | Сообщение #2
скрин перезайлей wondering
 
Рекламу запрещено!
 
   
Сообщение оставлено 29.09.2011 в 17:11:18 | Сообщение #3
effecT1k, на хосте ведутся тех. работы
 
 
   
Сообщение оставлено 29.09.2011 в 19:15:00 | Сообщение #4
Clark, лан будем ждать
 
Рекламу запрещено!
 
   
Сообщение оставлено 30.09.2011 в 07:54:28 | Сообщение #5
Круто! Сюда бы поставить...
 
Друг: Думаю надо извиниться. А ты как считаешь?
Я: На калькуляторе.
Друг: Я серьёзно.
Я: Ну иногда столбиком :DAAA
 
   
Сообщение оставлено 30.09.2011 в 18:57:11 | Сообщение #6
HeRo_0INe, зачем флудишь то?)
НЕ видел чего там а уже пишешь круто)
 
 
   
Сообщение оставлено 08.10.2011 в 15:37:44 | Сообщение #7
а перед какими тегами вставлять ?
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика