Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.10.2013, 15:08
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Вывод изо в видимой области экрана
Реализовано появление увеличенной копии изо при наведении на него курсора мыши.
Стоит задача: показывать эту копию только в видимой области экрана.

Логика такая: берём текущие координаты курсора (e.pageX и e.pageY), прибавляем к ним значение ширины и высоты нового блока соответственно и делаем выводы:
Если новое значение меньше ширины (высоты) экрана выводим новый блок в позиции курсора;
Если больше - получаем координаты позиции курсора минус ширина (высота) нового блока и смотрим:
Если новая координата больше 0 - выводим в ней новый блок;
Если меньше - делаем её равной 0...

На практике реализовал так:
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;

Для ширины всё работает изумительно, а вот с высотой не так...
При наведении курсор мыши дрожит и ничего не выводится... порой выводится, только новое окно уходит как за верхнюю, так и за нижнюю границы экрана...

Подскажите, где туплю???
Ответить с цитированием
  #2 (permalink)  
Старый 16.10.2013, 15:16
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от Dozentos
Подскажите, где туплю?
Сделай нормальный тестовый пример.
Ответить с цитированием
  #3 (permalink)  
Старый 16.10.2013, 15:34
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Вот полный код функции выводящей увеличенную копию:
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(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		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");
	});			
};

Последний раз редактировалось Dozentos, 16.10.2013 в 15:38.
Ответить с цитированием
  #4 (permalink)  
Старый 16.10.2013, 15:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от Dozentos
Вот полный код функции выводящей увеличенную копию
Ты понимаешь что есть тестовый пример?
Ответить с цитированием
  #5 (permalink)  
Старый 16.10.2013, 15:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

центрирование в видимой области
скролим кликаем по картинке и она всегда в центре ...
<!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: 1000px;
  }

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

ksa,
вам скинуть ссылку на ресурс, чтоб можно было посмотреть как "троит"???
Если нет, то я не понимаю, что такое "тестовый пример".
Ответить с цитированием
  #7 (permalink)  
Старый 16.10.2013, 15:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от Dozentos
я не понимаю, что такое "тестовый пример"
Его за тебя сделал рони...
Ответить с цитированием
  #8 (permalink)  
Старый 16.10.2013, 15:48
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

рони,
мне картинка нужна не в центре. Нужно чтоб курсор всегда её касался.
Но всё равно спасибо, сейчас разберу ваш код, - может шо полезное для своей задачи и усвою.
Ответить с цитированием
  #9 (permalink)  
Старый 16.10.2013, 15:57
Аватар для Dozentos
Аспирант
Отправить личное сообщение для Dozentos Посмотреть профиль Найти все сообщения от Dozentos
 
Регистрация: 08.10.2013
Сообщений: 47

Может это тестовый пример?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Гостиницы мира</title>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"> </script>
<script type="text/javascript" src="js/big_img.js"> </script>
<script language='javascript'>

$(document).ready(function(){
	imagePreview();
});
</script>
</head>

<body>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-01.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-01.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-02.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-02.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-04.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-04.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-05.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-05.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-07.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-07.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-09.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-09.jpg&max=50" /></a>
           <a href='javascript: void(null)' id="../mini/creative-advert-print-12.jpg" class="preview"><img src="../php_functions/resizer.php?pic=../mini/creative-advert-print-12.jpg&max=50" /></a>
</body>
</html>

Последний раз редактировалось Dozentos, 16.10.2013 в 15:59.
Ответить с цитированием
  #10 (permalink)  
Старый 16.10.2013, 16:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от Dozentos
Может это тестовый пример?
Уже лучше...
Но он не полный

Сообщение от Dozentos
../php_functions/resizer.php?pic=../mini/creative-advert-print-01.jpg&max=50
Это твой частный случай...
Если это запустить тут или скопипастить себе - ничего не грузанется...
Ответить с цитированием
Ответ



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

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


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