+7 (911) 913-40---
menu
person
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Разные эффекты изображений
BobДата: Воскресенье, 07.12.2014, 20:15 | Сообщение # 1
Лейтенант
Группа: Проверенные
Сообщений: 9
Награды: 1
Репутация: 0
Статус: Offline
Разные эффекты изображений при наведении курсора

ПРИМЕР


Код
<link href="http://www.novickiy.ru/demo/glavttttt/style222.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     // Vertical
     $("#vertical div a").hover(function(){
         $("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
     }, function() {
         $("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
     });
     // Horizontal
     $("#horizontal div a").hover(function(){
         $("img", this).stop().animate({left:"-180px"},{queue:false,duration:200});
     }, function() {
         $("img", this).stop().animate({left:"0px"},{queue:false,duration:200});
     });
});
</script>

     <div id="vertical" class="clear"><!-- Vertical -->
          

         <div><a href="http://www.novickiy.ru/photo/pejzazhi/2"><img src="http://www.novickiy.ru/demo/glavttttt/pei.jpg" alt=" Пейзаж можно было бы сравнить с музыкой" /></a></div>  
        <div><a href="http://www.novickiy.ru/photo/3"><img src="http://www.novickiy.ru/demo/glavttttt/nat.jpg" alt=" Картины с видами Натюрмортов украсят любой интерьер помещения, подчеркивая особый стиль." /></a></div>  
        <div><a href="http://www.novickiy.ru/photo/6"><img src="http://www.novickiy.ru/demo/glavttttt/mor.jpg" alt="Картина  
  с морским пейзажем, придаст любому помещению особый  
    шарм." /></a></div>  
        
        
     </div>
      
     <div id="horizontal" class="clear"><!-- Horizontal -->
          
          <div><a href="http://www.novickiy.ru/photo/8"><img src="http://www.novickiy.ru/demo/glavttttt/jan.jpg" alt=" Жанровая живопись украсит любой интерьер кабинета, офиса" /></a></div>  
         <div><a href="http://www.novickiy.ru/photo/10"><img src="http://www.novickiy.ru/demo/glavttttt/pit.jpg" alt=" Картины с видами Петербурга украсят любой интерьер помещения, подчеркивая особый стиль." /></a></div>  
         <div><a href="http://www.novickiy.ru/photo/4"><img src="http://www.novickiy.ru/demo/glavttttt/cvet.jpg" alt="Картины с цветами украсят любой интерьер помещения, подчеркивая особый стиль." /></a></div>  
     </div>
      
     <div id="vertical" class="clear"><!-- Vertical -->
          

         <div><a href="http://www.novickiy.ru/photo/1"><img src="http://www.novickiy.ru/demo/glavttttt/gol.jpg" alt="Голландские пейзажи украсят любой интерьер, подчеркивая особый стиль помещения." /></a></div>  
        <div><a href="http://www.novickiy.ru/photo/gorodskoj_pejzazh/17"><img src="http://www.novickiy.ru/demo/glavttttt/gor.jpg" alt="Городской пейзаж" /></a></div>  
        <div><a href="http://www.novickiy.ru/photo/posmotri/5"><img src="http://www.novickiy.ru/demo/glavttttt/abs.jpg" alt="Голландские пейзажи украсят любой интерьер, подчеркивая особый стиль помещения." /></a></div>
        
        
     </div>
 
  • Страница 1 из 1
  • 1
Поиск: