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

ksa 16.10.2013 16:03

Цитата:

Сообщение от Dozentos
js/big_img.js

Это так же отсутствует... :)

Dozentos 16.10.2013 16:12

Тогда пусть так будет!

<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){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.id +"' />"+ c +"</p>");								         
		
		left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX;
		top_coor = (e.pageY+$('#preview').height())>$(window).height() ? e.pageY - $('#preview').height() : e.pageY;
		left_coor = left_coor < 0 ? 0 : left_coor;
		top_coor = top_coor < 0 ? 0 : top_coor;
		
		$("#preview")
			.css("top",top_coor + "px")
			.css("left",left_coor + "px")
			.fadeIn("fast");						
    },
	function(e){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(){
		left_coor = (e.pageX+$('#preview').width())>$(window).width() ? e.pageX - $('#preview').width() : e.pageX;
		top_coor = (e.pageY+$('#preview').height())>$(window).height() ? e.pageY - $('#preview').height() : e.pageY;
		left_coor = left_coor < 0 ? 0 : left_coor;
		top_coor = top_coor < 0 ? 0 : top_coor;
		$("#preview")
			.css("top",top_coor + "px")
			.css("left",left_coor + "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>

ksa 16.10.2013 16:15

Цитата:

Сообщение от Dozentos
../js/jquery-1.9.1.min.js

Красотулечку пропустил... (с) :D

Dozentos 16.10.2013 16:22

Совсем забыл <style> дописать. Я поправил.

Dozentos 16.10.2013 16:27

http://code.jquery.com/jquery-latest.js
Тоже вставил на место.

Dozentos 16.10.2013 16:29

Теперь пример точно рабочий. Можно скопипастить себе и посмотреть (как отсюда лелать шоб запускался - я не обучен).
Только для полной наглядности блок с изо нужно бы по странице поскролить. Если надо - я внесу необходимые изменения. Вы только скажите.

ksa 16.10.2013 16:32

Цитата:

Сообщение от Dozentos
как отсюда лелать шоб запускался

Все тут и описано...
http://javascript.ru/formatting

Dozentos 16.10.2013 16:43

Всё запускается отсюда и скролится. Теперь поможете?

ksa 16.10.2013 16:49

Цитата:

Сообщение от Dozentos
Теперь поможете?

Наверное придется... :D

Вот только рабочий день уже подошел к завершению...
Но думаю желающих помочь, имея тестовый пример, прибавится. :)

Dozentos 16.10.2013 16:57

Будем надеяться..! :agree:


Часовой пояс GMT +3, время: 17:04.