Показать сообщение отдельно
  #4 (permalink)  
Старый 16.04.2011, 01:41
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#txt {
	height: 20px;
	border: 1px solid;
}
#box {
	width: 100px;
	height: 100px;
	background-color: orange;
	display: none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script> 
<script type="text/javascript">
function posMouse(e){
 var mouX = 0, mouY = 0;
 if (!e) e = window.event;
 if (e.pageX || e.pageY) {
  mouX = e.pageX;
  mouY = e.pageY;
 } else if (e.clientX || e.clientY) {
  mouX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
  mouY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
 }
 return {"x":mouX, "y":mouY}
}

$(document).ready(function(){
 $('#txt').mouseover(function(){
  $(this).next().slideDown('slow');
 })
 .mouseout(function(e){
  var elem = $(this).next(), mou = posMouse(e);
  if ((mou.x < elem.offset().left) || (mou.x > elem.offset().left + elem.width()) || (mou.y < elem.offset().top))
   elem.slideUp('slow');
 });
 $('#box').mouseout(function(){
  $(this).slideUp('slow');
 });
});
</script>
</head>
<body>
<div id='txt'></div>
<div id='box'></div>

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
</body>
</html>
Ответить с цитированием