Всплывающие подсказки внутри картинки при наведении на jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.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; } |
2#: После /head на нужных страницах вставляйте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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> |
3#: Картинки с подсказками оформляются следующим образом:
|
1 2 3 4 5 |
<div class="photo"> <div class="heading"><span>Название картинки</span></div> <img src="Ссылка на картинку"> <div class="caption"><span>Здесь любое ваше описание</span></div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
