All
В следующем коде
<html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery1.3.2.js"> </script> <script src="http://jqueryui.com/latest/ui/effects.core.js"></script> <script src="http://jqueryui.com/latest/ui/effects.slide.js"></script> <style type="text/css"> #show { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; } </style> <script> $(document).ready(function(){ $("#details").mouseover(function() { $("#show").show("slide", {}, 1000); }); </script> </head> <body> <div id="details">keyword</div> <div id="show" style="display:none;"></div> </body>
Я должен поместить div показа в середине страницы при наведении курсора на детали div. Можете ли вы сказать мне, как это можно сделать .....
Спасибо .........................
Как то так?
$("#details").mouseover(function() { var theTop = ($(window).height() / 2) - $('#show').height(); $("#show").show().css({margin:'0 auto', top:theTop}); });
Поскольку вы уже используете пользовательский интерфейс jQuery, я думаю, что диалоговое окно будет простым способом сделать это.
Если вы говорите об эффекте лайтбокса, существует множество плагинов jQuery, которые помогут вам справиться с этим. Некоторые примеры:
http://leandrovieira.com/projects/jquery/lightbox/
http://colorpowered.com/colorbox/
http://jqueryui.com/demos/dialog/