Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.09.2012, 22:36
Аватар для user100500
Новичок на форуме
Отправить личное сообщение для user100500 Посмотреть профиль Найти все сообщения от user100500
 
Регистрация: 28.08.2012
Сообщений: 8

Прокрутка страницы
На странице увеличиваю изображение(меняю css свойства ширины и высоты), и оно становится настолько большим что появляются полосы прокрутки. Необходимо сделать прокрутку страницы на центр экрана, но с учетом уже существующей прокрутки, т.е. если уже есть полосы прокрутки то при увеличении должно перематывать на центр открытой части изображения. Как зум в фотошопе в общем(куда кликнули туда и увеличивает, а у меня увеличение в центр видимой части изображения должен быть).
Делаю так, но оно увеличивает только в центр страницы, а мне надо учитывать полосы прокрутки:
var sY = $(document).height() - $(window).height();
var sX = $(document).width() - $(window).width();
scrollTo(sX / 2, sY / 2);

Видимо надо учитывать document.documentElement.scrollHeight или document.documentElement.scrollTop, но у меня не получается. Подскажите как это реализовать.
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2012, 13:23
Аватар для user100500
Новичок на форуме
Отправить личное сообщение для user100500 Посмотреть профиль Найти все сообщения от user100500
 
Регистрация: 28.08.2012
Сообщений: 8

это вообще реально сделать?
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2012, 14:41
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

читайте эту http://learn.javascript.ru/metrics и следующую страницу
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #4 (permalink)  
Старый 14.09.2012, 15:24
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" style="width: 100px; height: 100px">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script>
window.onload = function () {
	var a = 100;
	document.images[0].onclick = function () {
		this.style.width = this.style.height = (a = a + 10) + 'px';
		
		var h = window.innerHeight;
		var w = window.innerWidth;
		var difH = 0;
		var difW = 0;
		if (a > h) {
			difH = (a - h)/2;
		}
		if (a > w) {
			difW = (a - w)/2;
		}
		this.scrollIntoView(true);
		window.scrollBy(difW, difH);
	}
}
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 14.09.2012, 18:09
Аватар для user100500
Новичок на форуме
Отправить личное сообщение для user100500 Посмотреть профиль Найти все сообщения от user100500
 
Регистрация: 28.08.2012
Сообщений: 8

Сообщение от bes Посмотреть сообщение
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" style="width: 100px; height: 100px">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script>
window.onload = function () {
	var a = 100;
	document.images[0].onclick = function () {
		this.style.width = this.style.height = (a = a + 10) + 'px';
		
		var h = window.innerHeight;
		var w = window.innerWidth;
		var difH = 0;
		var difW = 0;
		if (a > h) {
			difH = (a - h)/2;
		}
		if (a > w) {
			difW = (a - w)/2;
		}
		this.scrollIntoView(true);
		window.scrollBy(difW, difH);
	}
}
</script>
а в чем здесь отличие от моего кода? здесь же тоже не учитываются полосы прокрутки.
Ответить с цитированием
  #6 (permalink)  
Старый 14.09.2012, 18:21
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от user100500
а в чем здесь отличие от моего кода? здесь же тоже не учитываются полосы прокрутки.
как понял, так и отписал
клиентская часть окна при превышении её размеров изображением всегда находится в центре изображения (равноотступает сверху/снизу и слева/спарва)
какие полосы прокрутки, куда что должно смещаться, объясните поподробнее и лучше с парой скриншотов
Ответить с цитированием
  #7 (permalink)  
Старый 14.09.2012, 23:35
Аватар для user100500
Новичок на форуме
Отправить личное сообщение для user100500 Посмотреть профиль Найти все сообщения от user100500
 
Регистрация: 28.08.2012
Сообщений: 8

Сообщение от bes Посмотреть сообщение
как понял, так и отписал
клиентская часть окна при превышении её размеров изображением всегда находится в центре изображения (равноотступает сверху/снизу и слева/спарва)
какие полосы прокрутки, куда что должно смещаться, объясните поподробнее и лучше с парой скриншотов
ну вот например на странице http://www.avege.ru/allimg/brim/bsf03.png есть полоса прокрутки. при увеличении надо чтобы увеличило и перематывало так что в центре экрана был низ изображения на котором написано "the new york times", т.е. в средину текущей открытой позиции сайта.
Ответить с цитированием
  #8 (permalink)  
Старый 14.09.2012, 23:46
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Держать низ изображения на том месте, где он находился в момент увеличения, что ли или просто по середине окна?
Ответить с цитированием
  #9 (permalink)  
Старый 15.09.2012, 10:30
Аватар для user100500
Новичок на форуме
Отправить личное сообщение для user100500 Посмотреть профиль Найти все сообщения от user100500
 
Регистрация: 28.08.2012
Сообщений: 8

Сообщение от bes Посмотреть сообщение
Держать низ изображения на том месте, где он находился в момент увеличения, что ли или просто по середине окна?
вот скрин. увеличивает ровно в центр видимой части изображения. вот надо чтобы перематывало в центр когда увеличивается изображение.
1:
2:
Ответить с цитированием
  #10 (permalink)  
Старый 15.09.2012, 12:18
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

ну мой пример так и работает, попробуйте в FF
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прокрутка окна при загрузке страницы dexteron Общие вопросы Javascript 5 09.04.2015 19:08
chrome firebug lite и прокрутка страницы в самый низ cmygeHm Общие вопросы Javascript 3 28.02.2012 12:34
Прокрутка страницы Phoenix Общие вопросы Javascript 7 30.10.2010 13:30
Opera 10 и вертикальная прокрутка страницы dillinger jQuery 0 20.07.2010 20:48
Прокрутка страницы с помощью клавиш Mirgorod Events/DOM/Window 0 17.06.2010 21:39