Javascript.RU

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

Запретить/разрешить скроллинг
Я масштабирую картинки колесиком мыши и восстанавливаю исходный размер кликом мыши:
Код:
<img onClick="Resizef" onmousewheel="SmoothSize" id= "1">
При кручении колесика, помимо масштабирования, происходит скролл всего окна. Как его запретить, пока мышь над рисуноком, и разрешить, когда вне?
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2008, 11:40
Аватар для Snipe
Профессор
Отправить личное сообщение для Snipe Посмотреть профиль Найти все сообщения от Snipe
 
Регистрация: 06.05.2008
Сообщений: 765

onmousewheel="SmoothSize; return false;" а так пробовали?
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2008, 11:52
Аспирант
Отправить личное сообщение для diagnost Посмотреть профиль Найти все сообщения от diagnost
 
Регистрация: 30.10.2008
Сообщений: 47

Сейчас попробовал, не помогло
Ответить с цитированием
  #4 (permalink)  
Старый 30.10.2008, 13:02
Аспирант
Отправить личное сообщение для diagnost Посмотреть профиль Найти все сообщения от diagnost
 
Регистрация: 30.10.2008
Сообщений: 47

Все заработало, спасибо. Видимо, в предыдущий раз скопировал с экрана, там лишняя точка с запятой:
Код:
onmousewheel="SmoothSize; return false;"
Без нее все ОК:
Код:
onmousewheel="SmoothSize; return false"
Ответить с цитированием
  #5 (permalink)  
Старый 30.10.2008, 23:00
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

А почему обработчик срабатывает без вызова? Я думал надо так:
<img onClick="Resizef()" onmousewheel="SmoothSize(); return false" id= "1">
Ответить с цитированием
  #6 (permalink)  
Старый 31.10.2008, 12:56
Аспирант
Отправить личное сообщение для diagnost Посмотреть профиль Найти все сообщения от diagnost
 
Регистрация: 30.10.2008
Сообщений: 47

Сейчас выглядит так:
Код:
<body onLoad = "GetInitSize()">
//тут еще кое-что...
<img src="Wiring/Вентилятор СО.png" border="1" alt="Схема 1" id="pic1" onClick="Resize(this)" onmousewheel="SmoothSize(this); return false">
JS выглядит так:
Код:
var InitHeight = new Array();
var InitWidth = new Array();

function GetInitSize()
{var NewImage =  new Image();
var allpic = document.getElementsByTagName("img");
for (var i = 0; i < allpic.length; i++)
{NewImage.src = allpic[i].src; 
InitHeight[allpic[i].id] = NewImage.height;
InitWidth[allpic[i].id] = NewImage.width;}
}

function Resize(obj)
{obj.width = InitWidth[obj.id];
 obj.height = InitHeight[obj.id];
}

function SmoothSize(obj)
{var WidthDelta;
var HeightDelta;
WidthDelta = event.wheelDelta;
HeightDelta = Math.round(event.wheelDelta*InitHeight[obj.id]/InitWidth[obj.id]);
if ((obj.offsetWidth + WidthDelta) > 5)
  {if ((obj.offsetHeight + HeightDelta) > 5)
    {obj.height += HeightDelta;
	 obj.width += WidthDelta;};
  }
}
Колесиком картинка масштабируется, кликом размер восстанавливается до исходного.
Единственно, при уменьшении картинки минимальный размер почему-то другой (точнее пропорции), чем после первого же клика.
Хорошо бы еще, чтобы позиция мышки на рисунке не смещалась при изменении масштаба. А также чтобы была возможность выделения области рисунка для его масштабирования.
Задача - максимально удобный просмотр эл. схем автомобиля.
Толкните в нужном направлении.

Последний раз редактировалось diagnost, 31.10.2008 в 13:02.
Ответить с цитированием
  #7 (permalink)  
Старый 01.11.2008, 13:02
Аспирант
Отправить личное сообщение для diagnost Посмотреть профиль Найти все сообщения от diagnost
 
Регистрация: 30.10.2008
Сообщений: 47

Добился того, чтобы позиция мышки на рисунке не смещалась при изменении масштаба. Для этого двигаю скроллинг окна:
Код:
function SmoothSize(obj)
{var WidthDelta;//Img width change on onmousewheel
var HeightDelta;
var NewWidth;
var NewHeight;
var WidthScroll;//Cursor pos change compensation on scaling
var HeightScroll;
WidthDelta = event.wheelDelta;
NewWidth = obj.offsetWidth + WidthDelta;
NewHeight = Math.round(NewWidth*InitHeight[obj.id]/InitWidth[obj.id]);//taking into account img proportion
HeightDelta = NewHeight - obj.offsetHeight;
if ((NewWidth > 5)&&(NewHeight > 5))
   {obj.width = NewWidth;
     obj.height = NewHeight;
     WidthScroll = Math.round(event.offsetX*WidthDelta/NewWidth);  
     HeightScroll = Math.round(event.offsetY*HeightDelta/NewHeight); 
     window.scrollBy(WidthScroll, HeightScroll);
    }	
}
Минимальная величина картинки - 5 пикселей. Пропорции соблюдаются отлично по сравнению с прежним вариантом.
Получается сперва увеличение/уменьшение картинки (изменение obj.height и obj.width), затем смещение окна на нужную величину (window.scrollBy). Конечно, пока картинки меняют масштаб и смещаются, идет мусор на экране. Как избавиться от мусора, подскажите пожалуйста.

Последний раз редактировалось diagnost, 02.11.2008 в 02:32.
Ответить с цитированием
  #8 (permalink)  
Старый 10.07.2012, 01:06
Аспирант
Отправить личное сообщение для shilinpavel Посмотреть профиль Найти все сообщения от shilinpavel
 
Регистрация: 06.09.2011
Сообщений: 73

Все хорошо, только этот метод не работает в Firefox, может кто нибудь подскажет кроссбраузерный вариант, пожалуйста
Ответить с цитированием
  #9 (permalink)  
Старый 10.07.2012, 01:59
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

shilinpavel,
я уже писал о подобном в этой теме: Отключить скролл мышкой во время анимации окна
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
горизонтальный скроллинг при движении мышки flexpro Общие вопросы Javascript 9 25.07.2008 14:12