Principala » fisiere » Scripturi » Ucoz [ Adauga un material nou ]

Тип подсказок внутри картинки при наведении через библиотеку jQuery Easing

2010-08-17, 9:25 PM

Тип подсказок внутри картинки при наведении через библиотеку jQuery Easing


Тип подсказок внутри картинки при наведении через библиотеку jQuery Easing


Ещё один вид подсказок внутри картинок при наведении. На этот раз всё осуществляется через библиотеку эффектов jQuery Easing. Честно говоря, скрипт порадовал тем, что выводит и название картинки сверху, и краткое описание снизу.

Установка:

После /head на нужных вам страницах вставляйте:

Code
<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;  
  font-size:15px;  
  padding:5px 0 0 10px;  
  }  
   
  .photo .caption span{  
  color:#999;  
  font-size:11px;  
  display:block;  
  padding:5px 10px 0 10px;  
  }  
   
  </style>

Сама картинка прописывается следующим образом:

Code
<div class="photo">  
  <div class="heading"><span>Название картинки</span></div>  
  <img src="Ссылка на картинку">  
  <div class="caption"><span>Здесь любое ваше описание</span></div>  
  </div>

Осталось лишь залить скрипт из прикреплённого архива в папку js

Источник материала: apocalypse.ucoz.kz

Скачать «Тип подсказок внутри картинки при наведении через библиотеку jQuery Easing»
И



Categorie: Ucoz | Adaugat de: kopceak
Vizualizari: 990 | Downloads: | Raging: 0.0/0
Total comentarii : 0
Doar utilizatorii inregistrati pot comenta
[ Inregistrare | Login ]
Schimbul de fişiere este realizat de către utilizatorii site-ului, administraţia nu poartă nici o răspundere pentru conţinutul acestora sau pentru prejudiciile provocate. INTERFILM.MD nu dispune de conţinutul pus la schimb de către utilizatori, ci doar este un catalog al resurselor. Vă atenţionăm să nu încărcaţi pe site fişiere protejate de drepturile autorului sau fişiere cu conţinut ilegal. În cazul în care sunteţi deţinătorul drepturilor de autor al unui torrent şi doriţi să fie şters vă rugăm să ne scrieţi la adresa abuse@interfilm.md şi imediat se vor lua măsuri. Întregul text privind regulile şi condiţiile de utilizare a siteului poate fi găsit aici.