Всем привет.
Дано: div#view контейнер (на нем весят все события), в котором находится еще один div#map с огромной матрицей divиков.cells внутри.
Задача: сделать #map перетаскиваемым и зумящимся с колесика мышки.
Проблема: я очень долго тупил над вопросом, что делать после применения к #map css trasform scale. Куда, насколько и что конкретно двигать.
Решение: Главная проблема была тут:
checkborders: function(){
this.border.left = 200 - (( window.innerWidth - (window.innerWidth * this.zoomdelta) ) / 2) / this.zoomdelta;
this.border.top = 200 - (( window.innerHeight - (window.innerHeight * this.zoomdelta) ) / 2) / this.zoomdelta;
this.border.right = -200-30*114+window.innerWidth + (( window.innerWidth - (window.innerWidth * this.zoomdelta) ) / 2) / this.zoomdelta;
this.border.bottom= -200-20*66+window.innerHeight + (( window.innerHeight - (window.innerHeight * this.zoomdelta) ) / 2) / this.zoomdelta;
}
200 - реальный желаемый отступ по краям.
30*114 дивы в одной строчке на их ширину
20*66 строчки на высоту дивов
Рабочий пример для Firefox, Opera, Chrome: _http://mogame.org/test2.php
js, css, scale, transform, zoom, zooming, scaling, position div, mapping