Главная Форум Гостевая книга Регистрация
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Скрипты для ucoz » Другие скрипты » Выезжающие подсказки - шторки для изображения на jQuery
Выезжающие подсказки - шторки для изображения на jQuery
ВэйДлинДата: Воскресенье, 20.09.2009, 22:51 | Сообщение # 1
Админ
Группа: Администраторы
Сообщений: 100
Репутация: 3
Статус: Offline

Очень интересный эффект для изображения: при наведении указателя мыши на изображение,плавно появляются полупрозрачные шторки сверху и снизу,содержащие текстовую информацию.
Установка
в HEAD страницы прописываем:
Code
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>   
     <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>   
     <script>   
     $(document).ready(function () {   

      // transition effect   
      style = 'easeOutQuart';   

      // if the mouse hover the image   
      $('.photo').hover(   
       function() {   
        //display heading and caption   
        $(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});   
        $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});   
       },   

       function() {   
        //hide heading and caption   
        $(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});   
        $(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});   
       }   
      );   

     });   
     </script>   
     <style>   
         
     .photo {   
      position:relative;   
      font-family:arial;     
      overflow:hidden;   
      border:5px solid #000;   
      width:350px;   
      height:233px;   
     }     
         
      .photo .heading, .photo .caption {   
       position:absolute;   
       background:#000;   
       height:50px;   
       width:350px;   
       opacity:0.6;   
      }   
          
      .photo .heading {     
       top:-50px;   
      }   

      .photo .caption {       
       bottom:-50px;      
       left:0px;   
      }   
          
      .photo .heading span {   
       color:#26c3e5;     
       top:-50px;   
       font-weight:bold;   
       display:block;   
       padding:5px 0 0 10px;   
      }   
          
      .photo .caption span{   
       color:#999;     
       font-size:9px;   
       display:block;   
       padding:5px 10px 0 10px;   
      }   
          
     </style>  
  

после тега
Code
<body>

Вставляем
Code
<div class="photo">   
     <div class="heading"><span>Telephoto Lens</span></div>   
     <img src="images/fall.jpg" width="350" height="233" alt="" />   
     <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from the front of the lens to the film plane is less than the focal length of the lens. </span></div>   
   </div>
Прикрепления: caption.zip(37Kb)
 
Форум » Скрипты для ucoz » Другие скрипты » Выезжающие подсказки - шторки для изображения на jQuery
Страница 1 из 11
Поиск:
Главная | Форум

Конструктор сайтов - uCoz
Правообладателям
         
  Баннер   Баннер