Страница 3 из 3 < 12 3
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Вывод изо в видимой области экрана (https://javascript.ru/forum/jquery/42186-vyvod-izo-v-vidimojj-oblasti-ehkrana.html)

рони 16.10.2013 17:02
:dance: лёгким движением руки брюки превращаются ... или за курсором но в пределах видимой части экрана...
<!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>

рони 16.10.2013 19:29
в пределах видимости
 
:) шортики...
<!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>

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

<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>

рони 16.10.2013 23:54
Dozentos,
Цитата:
Сообщение от Dozentos
Шож, никто не помог... но решение я всё же нашёл. Может пригодится кому, выложу. Вот рабочий пример
чем вам вариант "шортики"неподошёл? да и ваш вариант скачет сам по себе да и за пределы видимой части

ksa 17.10.2013 08:25
Цитата:
Сообщение от рони
шортики...
Ловчее работают. :yes:

Dozentos 17.10.2013 12:00
А можно про "шортики поподробнее"???

рони 17.10.2013 12:15
Цитата:
Сообщение от Dozentos
можно про "шортики поподробнее"???
что именно? код перед вами - если картинка невлезает справа она показывается слева от курсора также верх низ-- источник самой картинки атрибут дата в ссылке

Dozentos 17.10.2013 12:56
Простите, невнимателен. Не заметил сразу код, думал это мой вчерашний.
Сейчас разберу. Кстати, не понимаю, почему мой тестовый пример здесь работает плохо??? На реальной странице всё нормально. Вот, можете посмотреть здесь

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

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


Часовой пояс GMT +3, время: 21:29.
Страница 3 из 3 < 12 3
Показывать 40 сообщений этой темы на одной странице