cyber,
Просто попробуй Если это катит и с небольшими тормозами - то ею стоит занимацо Цитата:
<html>
<head></head>
<body style="width:100%">
<style type="text/css">
#wrapper {
width:700px;
height:300px;
overflow:auto;
border: 2px solid red;
}
#Wtable {
width:120%;
border-collapse:collapse;
border:collapse;
}
#Wtable,
#Wtable td,
#Wtable td img{
padding:0; margin:0;
border: 0 none transparent;
}
#Wtable td {
width:16.7%;
}
</style>
<div id="wrapper">
<table id="Wtable" cols="6">
<tbody>
<tr>
<td>
<img src="http://s1.uploads.ru/i/Ikgms.jpg" style="width:100%;height:auto">
</td>
<td>
<img src="http://s1.uploads.ru/i/57xoZ.jpg" style="width:100%;height:auto">
</td>
</tr>
<tr>
<td>
<img src="http://s1.uploads.ru/i/lqhWv.jpg" style="width:100%;height:auto">
</td>
<td>
<img src="http://s1.uploads.ru/i/UXTZ7.jpg" style="width:100%;height:auto">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
Цитата:
|
Цитата:
|
Цитата:
не совсем понял смысел кода 81 поста, и само сообщение. А реализацию я отложу на завтра |
cyber,
При больших масштабах у тьву всегда табла будет максимум на 4 ячейки (остальные картинки скрыты visibility:hidden воть и весь смысл - 4 ячейки - не 24 а при малом масштабе ( будет другой метод |
Цитата:
|
cyber,
Если в данном размере четверка картинок ездит в Хроме терпимо(посколь во всех остальных вроде норма) мельчить не стоит, если будет тормозить мон еще порезать надвое - но более смысла нет - поскольку при резке - общий объем возрастает их жа подгружать еще придется на первом этапе 24 картинки -уже 7 мегов в jpeg |
Цитата:
но в данный момент тупит во всех браузерах |
все проблема решина гениально просто.
Если лагает при совмещение встроенного зума и drag and drop , значить нужно удалить одну переменную из уравнения, или просто говоря написать зум самому=)
var height, width;
var scale = 1 + options.scaleStep;
if (zoom) {
width = zooming.width() * scale;
height = zooming.height() * scale;
} else {
width = zooming.width()/scale;
height = zooming.height()/scale;
//if (width < getWidth || height < getHeight) return;// минимальный зум исходный размер
}
var left = (width - getWidth) / 2;
var top = (height - getHeight) /2;
zooming.css({
position:'relative',
width: width +'px',
height: height +'px',
left: -left+ 'px',
top: -top+'px'
});
|
без css3 вообще не лашает:blink:
|
cyber,
Ссыль есть ? |
будет через 10 мин=)
лишнее по удаляю из кода и залью |
я только одного не могу понять, изначально я то на js делал и оно под лагивало, а теперь нет, я только одну функцию менял (в общем не одну , но когда удалил все что связано с css3 получилось 1),
function MoveWrapper() {
var timeout = true;
return function (e) {
if(!timeout || !move) return;
timeout = false;
window.requestAnimationFrame(function () {
MouseMove(e)
timeout = true;
});
}
}
вот ссылка http://cyberua.16mb.com/files/ |
cyber,
 , Круть!!Сушай - cyber, - Запрети скролл боди и zoom cтраницы при нахождении курсора во wrapperе иначе передвигается при малых размерах картинки и сама страница |
Цитата:
|
Deff,опять проблемы с точками
делаю вот так
function setNewPosition (zoom) {
points.each(function(index, element) {
var left = parseInt($(this).css('left'));
var top = parseInt($(this).css('top'));
if (zoom) {
left *= scale;
top *=scale;
} else {
left /= scale;
top /=scale;
}
$(this).css({
left: left +'px',
top: top +'px'
});
});
}
scale константа задаваемая юзером , это зум проще говоря но точки летают жестоко далеко=) |
вот http://cyberua.16mb.com/files/
переделал но точки смещают на не большее растояние не понятно почему |
cyber,
Классно а чо за функция поддержания координат точек ? там тож нужно начальное неизменяемые координаты - зуммить Т.е обычно если зуммить не начальные - то нарастает ошибка зума Походу при минимальном масштабе - ти выкидываешь начальные координаты пойнтеров(их нун помнить постоянно) и множить а зумм, (если скатываться несколько раз в минимум масштаба, точки, потихонечку_ съезжают вниз и вправо (браузер - Опера |
function setNewPosition (zoom, width, height) {
points.each(function(index, element) {
var left = parseInt($(this).css('left'));
var top = parseInt($(this).css('top'));
if (zoom) {
left *= width / zooming.width();
top *= height / zooming.height();
} else {
left /= zooming.width() / width;
top /= zooming.height() / height;
}
$(this).css({
left: Math.round(left) +'px',
top: Math.round(top) +'px'
});
});
}
щас попробую с начальными |
Цитата:
|
Deff, сделал но теперь еще хуже
|
пока сделал по быстро только на увлечение, но все равно не работает правильно=(
var zLeft = 0;
var zTop = 0;
function setNewPosition (zoom, width, height) {
zLeft += width / zooming.width() == 1 ? 0 : width / zooming.width();
zTop += height / zooming.height() == 1 ? 0 : height / zooming.height() ;
var i = 0;
points.each(function(index, element) {
var left = posLeft[i];
var top = posTop[i];
if (zoom) {
left *= zLeft;
top *= zTop;
} else {
left /= zooming.width() / width;
top /= zooming.height() / height;
}
i++;
$(this).css({
left: Math.round(left) +'px',
top: Math.round(top) +'px'
});
});
}
|
cyber,
А ссылка та же ? *Посмотреть ? (Думаю Что Аналогичная феня и в карте (тож набег округлений) - в итоге и раздрай.... (Если прошлый раз оно совпадало по идеалогии с картой, то основная погрешность была ток при самых мелких масштабах |
|
Потом у тьву всё равно нет констант
Должно быть так left = Left00*zoom Left00 - это начальное смещениие от лево приведенной к максимальному масштабу карты (константа - не меняемая после установки точки) zoom - это отношение текущей карты к максимальной величине карты |
константа, я с зумом затупил
|
эм...
смещается на столька же
function setNewPosition (zoom, nWidth, nHeight) {
var i = 0;
points.each(function(index, element) {
var left = posLeft[i];
var top = posTop[i];
if (zoom) {
left *= nWidth / width;
top *= nHeight / height;
} else {
left /= zooming.width() / width;
top /= zooming.height() / height;
}
i++;
$(this).css({
left: Math.round(left) +'px',
top: Math.round(top) +'px'
});
});
}
как и тут
function setNewPosition (zoom, width, height) {
points.each(function(index, element) {
var left = parseInt($(this).css('left'));
var top = parseInt($(this).css('top'));
if (zoom) {
left *= width / zooming.width();
top *= height / zooming.height();
} else {
left /= zooming.width() / width;
top /= zooming.height() / height;
}
$(this).css({
left: Math.round(left) +'px',
top: Math.round(top) +'px'
});
});
}
|
Deff, вариантов больше нет?
|
cyber,
Нун смотреть карту - наверняка и там где-то есть наращивание погрешностей округления Гы - перезагрузил какрту - поехали Ксать - посколь растояние между ними не бегает ( между ними двумя ) Есть предположение - что сейчас ты Left берешь не от той оболочки Я Думал - что дроп ты делаешь со внешней - а масштаб со внутренней - это так ? или наоборот ? Т.е left и тоp предполагались от левого верхнего угла карты |
Deff,дело не в округлениях.
вот блок <div class="map" id="map"> <div id="wrapper" class="wrapper"> <div id="zooming" class="zooming-map"> <img src="general.jpg"/> <a href="#" class="point_on_map" style="left:20%; top:30%;"></a> <a href="#" class="point_on_map" style="left: 427px; top: 356px; "></a> <a href="#" class="point_on_map" style="left:1000px; top:800px;"></a> </div> </div> </div> при вызове скрипта я устанавливаю все точкам значение в px
function setPointPosition(){
points.each(function() {
var coords = $(this).offset();
$(this).css({
left: coords.left - coord_elem.left +'px',
top: coords.top - coord_elem.top +'px'
});
});
}
относительно текущего блока / B coords координаты <div class="map" id="map"> |
cyber,
У тебя должна быть текущая координата левого верхнего угла картинки карты и константы смещения пойнтера - leftt00 и тор00 (для каждой точки ) относительно левого верхнего угла картинки карты при максимальном масштабе карты (далее та же схема - что мну выше пояснил Далее ты вычисляешь поправку координаты пойнтера относительно карты, - домножая на zoom и добавляешь текущие координаты угла карты(относительно того родительского блока , где лежат пойнтеры), тогда любые погрешности карты не влияют на пойнтеры |
я устанавливаю координаты относительно zooming (блока в котором лежат карта и точки)
points.each(function() {
var coords = $(this).offset();
var zoomCoord = zooming.offset();
$(this).css({
left: coords.left - zoomCoord.left +'px',
top: coords.top - zoomCoord.top +'px'
});
и потом просто получаю координаты из самих точек (беру тот вариант который делал изначально, так как работают они одинаково и твой и мой)
var left = parseInt($(this).css('left'));
var top = parseInt($(this).css('top'));
и потом умножаю их на зум |
вот не пойму где я напортачил , что появляется смещение=(
|
все таки дело не в отступе
<!DOCTYPE HTML>
<html>
<head>
<style>
#wrapper {
position:absolute;
}
#wrapper > a{
top:50px;
left:70px;
width:30px;
height:30px;
background-color:red;
position:absolute;
border-radius:50%;
}
</style>
</head>
<body>
<div id='wrapper'>
<img src='http://worldofwarplanes.ru/dcont/fb/media/contest_24_02_2012/graf_grob.jpg'>
<a href='https://www.google.com.ua/'></a>
<div>
<a href='#' onclick='newSize()'>size</a>
<script>
function newSize() {
var zoomL = 1000 / 640;
var zoomT = 1000 / 480;
_('img').style.width = 1000+'px';
_('img').style.height = 1000+'px';
_('a').style.left = 70 * zoomL+'px';
_('a').style.top = 50 * zoomT+'px';
}
function _(selector) {
return document.querySelectorAll(selector)[0];
}
</script>
</body>
</html>
|
Deff, уже вариантов нет для точек, у тебя еще идеи остались?
|
пытаюсь понят как тут http://vectorflower.com/preview/smoo...m/sample5.html
у них точка почти не смещается |
cyber,
1. Всё абсолютно верно, если про логику работы, что я объяснял 2. Замеченные Баги на версии по ссылке => Первое небольшое увеличение(масштаба) - крутка колесиком на пол-щелчка - Всегда проходит корректно , без смещения точек относительно карты!, второе и последущие - глюки. cyber, а) Нет привязки координат точек к углу карты http://cyberua.16mb.com/files/general.jpg и выставления констант смещений(константы смещений приведенные к максимальному масштабу карты left и top точки (они посточнны и неизменяемы, меняеется лишь множитель zoom. 2) Нет явного вычисления координат угла картинки карты относительно id="zooming" |
Цитата:
т.е нет я определяю координаты блока zooming а его координаты такие же как и у карты Цитата:
Цитата:
|
Цитата:
Цитата:
и margin- тоp:-1/2высоты кружка - а так всё стоит - обведи верхнюю левую точку крепления кружка крестиком на картинке Для варианта метки - "Восклицательным знаком"(как сейчас на карте) = margin- тоp:-высота ("Значка") |
вот смотри
использовал плагин ленейку для хрома , и посчитал ширину от верха карты до точки(так как все не влезло на экран показано для высоты) на панельки в верху видно сколько от вверха карты, в консоли видно текущую позицию . исходные координаты точки left = 100; top = 100; начальная ширина карты = 1000px конечная = 4890 4890 / 1000 = 4,89; 4,89 * 100 = 489 ну вот где ошибка, почему точка уежает?  |
| Часовой пояс GMT +3, время: 16:24. |