Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 16.10.2013, 17:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

лёгким движением руки брюки превращаются ... или за курсором но в пределах видимой части экрана...
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  body{
    height: 2000px;
    width: 2000px;
    padding: 0px;
    margin: 0px;
  }

  </style>
<script>
jQuery.fn.center = function(event)
	{
	var w = $(window),
    top = (w.height()-this.height())+w.scrollTop(),
    left = (w.width()-this.width())+w.scrollLeft();
    this.css("position","absolute");
	this.css("top",top > event.pageY ? event.pageY : top + "px");
	this.css("left", left > event.pageX ? event.pageX : left+"px");
	return this;
	}
function creatOverlay(event){
  $("img").center(event)
}
$(document).on({"mousemove": creatOverlay},"body")
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" >
</body>
</html>
Ответить с цитированием
  #22 (permalink)  
Старый 16.10.2013, 19:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

в пределах видимости
шортики...
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8" />
  <script src="https://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  body{
    height: 2000px;
    width: 2000px;
    padding: 0px;
    margin: 0px;
  }
 #preview{
	position:absolute;
	border:1px solid #ccc;
	background:#FFF;
	padding:5px;
	color:#03F;
    z-index: 100;
    display: none;
}
.block{
	min-height: 400px;
    position: relative;
    top: 300px;
    left: 350px;
}
  </style>
<script>
 jQuery.fn.center = function(event)
 {
 		var w = $(window),
 		top = (w.height()-this.outerHeight(true))+w.scrollTop() -(event.pageY+22),
 		left = (w.width()-this.outerWidth(true))+w.scrollLeft() -(event.pageX+7);
 		this.css("position", "absolute");
 		this.css("top", top > 0? event.pageY+22: (event.pageY-this.outerHeight(true)) + "px");
 		this.css("left", left> 0? event.pageX+7: (event.pageX-this.outerWidth(true))+"px");
 		return this;
 }
 $(document).ready(function ()
 		{
 				$(".block  img").mousemove(function (event)
 						{
 								$("#preview").center(event);
 						}
 				)
 				$(".block  img").mouseenter(function ()
 						{
 								$("#preview").attr({'src': $(this).parent().data('src')})
 								.stop(true, true).fadeIn()
 						}
 				)
 				$(".block  img").mouseleave(function ()
 						{
 								$("#preview").stop(true, true).fadeOut();
 						}
 				)
 		}
 )
</script>
</head>
<body>   <img id="preview" >
<div class='block'>
           <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' data-src="http://javascript.ru/img/ws_1.png" class="preview"><img src="http://javascript.ru/img/ws_1.png" width='50' height='50'  /></a>
</div>
</body>
</html>

Последний раз редактировалось рони, 01.03.2018 в 01:36.
Ответить с цитированием
  #23 (permalink)  
Старый 16.10.2013, 23:41
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Шож, никто не помог... но решение я всё же нашёл. Может пригодится кому, выложу. Вот рабочий пример:

<head>
<meta charset="utf-8">
<title>Гостиницы мира</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<script language='javascript'>
this.imagePreview = function(){
	
	$("a.preview").hover(function(e){
		var mouseTop = e.pageY - $(window).scrollTop();
		var mouseLeft = e.pageX - $(window).scrollLeft();
		
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<div id='preview'><img src='"+ this.id +"' />"+ c +"</div>");
		
		var imgTop = e.pageY;
		imgTop = (imgTop + $('#preview').height()) > ($(window).scrollTop() + $(window).height()) ? ($(window).scrollTop() + $(window).height()) - $('#preview').height() - 20 : imgTop;
		var imgLeft = e.pageX;
		imgLeft = (imgLeft + $('#preview').width()) > ($(window).width() + $(window).scrollLeft()) ? ($(window).scrollLeft() + $(window).width()) - $('#preview').width() - 20 : imgLeft;
				
		$("#preview").css({top: imgTop + "px",
			               left: imgLeft + "px"}).fadeIn("fast");
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		var mouseTop = e.pageY - $(window).scrollTop();
		var mouseLeft = e.pageX - $(window).scrollLeft();
		var imgTop = e.pageY;
		imgTop = (imgTop + $('#preview').height()) > ($(window).scrollTop() + $(window).height()) ? ($(window).scrollTop() + $(window).height()) - $('#preview').height() - 20 : imgTop;
		var imgLeft = e.pageX;
		imgLeft = (imgLeft + $('#preview').width()) > ($(window).width() + $(window).scrollLeft()) ? ($(window).scrollLeft() + $(window).width()) - $('#preview').width() - 20 : imgLeft;
		
		$("#preview").css({top: imgTop + "px",
			               left: imgLeft + "px"});
	});			
};

$(document).ready(function(){
	imagePreview();
});
</script>
<style>
#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#FFF;
	padding:5px;
	display:none;
	color:#03F;
}
.block{
	min-height: 400px;
}
</style>
</head>

<body>
<div class='block'>gbgfgfb</div>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
           <a href='javascript: void(null)' id="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class="preview"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width='50' height='50'  /></a>
<div class='block'>gbgfgfb</div>
</body>
Ответить с цитированием
  #24 (permalink)  
Старый 16.10.2013, 23:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Dozentos,
Сообщение от Dozentos
Шож, никто не помог... но решение я всё же нашёл. Может пригодится кому, выложу. Вот рабочий пример
чем вам вариант "шортики"неподошёл? да и ваш вариант скачет сам по себе да и за пределы видимой части
Ответить с цитированием
  #25 (permalink)  
Старый 17.10.2013, 08:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,122

Сообщение от рони
шортики...
Ловчее работают.
Ответить с цитированием
  #26 (permalink)  
Старый 17.10.2013, 12:00
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

А можно про "шортики поподробнее"???
Ответить с цитированием
  #27 (permalink)  
Старый 17.10.2013, 12:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Dozentos
можно про "шортики поподробнее"???
что именно? код перед вами - если картинка невлезает справа она показывается слева от курсора также верх низ-- источник самой картинки атрибут дата в ссылке
Ответить с цитированием
  #28 (permalink)  
Старый 17.10.2013, 12:56
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Простите, невнимателен. Не заметил сразу код, думал это мой вчерашний.
Сейчас разберу. Кстати, не понимаю, почему мой тестовый пример здесь работает плохо??? На реальной странице всё нормально. Вот, можете посмотреть здесь
Ответить с цитированием
  #29 (permalink)  
Старый 17.10.2013, 13:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Dozentos
На реальной странице всё нормально.
ок!вполне достаточно, хотя при известной сноровке картинка выскакивает за пределы видимой части но это мелочи ))) на картинке фото ушло в право появился нижний скролл - возможно бордюр или отступы или кто-то быстро мышкой водит ))

Последний раз редактировалось рони, 10.01.2014 в 04:43.
Ответить с цитированием
  #30 (permalink)  
Старый 17.10.2013, 15:58
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Хм... моей "сноровки" на это не хватило...
В любом случае можно считать тему закрытой. Есть два варианта решения поставленной задачи: мой и "шортики". Можно использовать любой (хотя "шортики", конечно, попроще и постабильнее).
Всем большое спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как определить размер видимой области мобильного браузера ? mitiya Общие вопросы Javascript 5 16.10.2012 18:31
Вычисление крайних элементов в видимой области окна Helen Общие вопросы Javascript 1 21.11.2011 19:33