Реализация zoom и перемещения img.

**Romanenko_o** · 08.11.2016 13:26

Добрый день, задался целью сделать удобную работу с изображением на HTML+CSS+JS без использования сторонних библиотек (так как сам "зеленый") кое-что написал

Текст кода

<!doctype html>
<html lang='ru'>

<head>
<meta charset='UTF-8'>
<title>Document</title>
<style rel='stylesheet' type='text/css'>
body {
padding: 0px;
margin: 0px;
}

#block {
position: absolute;
padding: 0px;
margin: 10%;
border: 1px solid red;
overflow: hidden;
width: 500px;
height: 500px;
}

#imgScale {
position: absolute;
height: 100%;
padding: 0px;
margin: 0px;
}

#buttomCenterImg {
position: absolute;
height: 30px;
width: 30px;
bottom: 10px;
right: 10px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
background-position: 0 0;
background-size: cover;
background-color: #ffffff;
outline: none;
background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ-GtpjIwPha8V94McziCDJllsn8BZWgm-xujeO3EWS7EYEfzg6');
}
</style>
<script>
var imgScale, startPageX, startPageY, startTop, startLeft;
var pressButtom = false;
var scale = 1;

function cancelZoomAndPosition() {

imgScale.style.transform = 'scale(1)';
imgScale.style.left = '0px';
imgScale.style.top = '0px';

}

function onWheel(e) {

e = e || event;
var delta = e.deltaY || e.detail || e.wheelDelta;

if (delta == 0) return;

scale = (delta < 0) ? scale * 1.2 : scale * 0.8;

if (scale < 1) {
scale = 1;
} else if (scale > 2.5) {
scale = 2.5;
}

scale = scale.toFixed(2);

imgScale.style.transform = imgScale.style.WebkitTransform = imgScale.style.MsTransform = 'scale(' + scale + ')';

e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
onload = function() {

imgScale = document.getElementById('imgScale');
var block = document.getElementById('block');

scale = 1;

if (block.addEventListener) {
if ('onwheel' in document) {
// IE9+, FF17+, Ch31+
block.addEventListener("wheel", onWheel);
} else if ('onmousewheel' in document) {
// устаревший вариант события
block.addEventListener("mousewheel", onWheel);
} else {
// Firefox < 17
block.addEventListener("MozMousePixelScroll", onWheel);
}
} else { // IE8-
block.attachEvent("onmousewheel", onWheel);
}

imgScale.onmousedown = function(e) {

e = e || event;

if (e.which == 1 || e.button == 1) {
pressButtom = true;
var position = imgScale.getBoundingClientRect();
startTop = position.top;
startLeft = position.left;
startPageX = e.pageX;
startPageY = e.pageY;
}
};
document.onmouseup = function() {
pressButtom = false;
imgScale.style.cursor = 'default';
};

imgScale.onmousemove = function(e) {

e = e || event;

if (pressButtom) {
var newLeft = e.pageX * scale - startPageX + startLeft;
var newTop = e.pageY * scale - startPageY + startTop;
imgScale.style.left = String(newLeft) + 'px';
imgScale.style.top = String(newTop) + 'px';
imgScale.style.cursor = 'move';
}

return false;
};

};
</script>
</head>

<body>
<div id='block'>
<img id='imgScale' src='http://vignette4.wikia.nocookie.net/simpsons/images/b/bc/Барт.png/revision/latest?cb=20130718084835&path-prefix=ru'>
<button id='buttomCenterImg' onclick='cancelZoomAndPosition()'></button>
</div>

</body>

</html>

[свернуть]

но оно работает коряво.

1. После зума все начинает прыгать.
2. Все это работает в chrome и opera. В firefox при перетаскивании картинки она не движется за мышкой, а срабатывает перемещение img и как отменить я не понял.
3. В сафари все просто дико виснет и что то делать просто невозможно!

**brainix** · 08.11.2016 21:09

Юзайте jquery-ui. Там есть и зум и перетайскивание

**Romanenko_o** · 09.11.2016 12:01

Хотелось бы самому понять как это работает. И в чем ошибки.

**brainix** · 09.11.2016 23:54

Сообщение от Romanenko_o

Хотелось бы самому понять как это работает.

У вас есть код, у вас есть гугл. Смотрите строчка за строчкой что они делают, а потом что делают в целом отдельные блоки.

	08.11.2016 13:26 #1
Romanenko_o Новичок Регистрация: 01.11.2016 Сообщений: 2 Репутация: 0	Добрый день, задался целью сделать удобную работу с изображением на HTML+CSS+JS без использования сторонних библиотек (так как сам "зеленый") кое-что написал Текст кода <!doctype html> <html lang='ru'> <head> <meta charset='UTF-8'> <title>Document</title> <style rel='stylesheet' type='text/css'> body { padding: 0px; margin: 0px; } #block { position: absolute; padding: 0px; margin: 10%; border: 1px solid red; overflow: hidden; width: 500px; height: 500px; } #imgScale { position: absolute; height: 100%; padding: 0px; margin: 0px; } #buttomCenterImg { position: absolute; height: 30px; width: 30px; bottom: 10px; right: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); background-position: 0 0; background-size: cover; background-color: #ffffff; outline: none; background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ-GtpjIwPha8V94McziCDJllsn8BZWgm-xujeO3EWS7EYEfzg6'); } </style> <script> var imgScale, startPageX, startPageY, startTop, startLeft; var pressButtom = false; var scale = 1; function cancelZoomAndPosition() { imgScale.style.transform = 'scale(1)'; imgScale.style.left = '0px'; imgScale.style.top = '0px'; } function onWheel(e) { e = e \|\| event; var delta = e.deltaY \|\| e.detail \|\| e.wheelDelta; if (delta == 0) return; scale = (delta < 0) ? scale * 1.2 : scale * 0.8; if (scale < 1) { scale = 1; } else if (scale > 2.5) { scale = 2.5; } scale = scale.toFixed(2); imgScale.style.transform = imgScale.style.WebkitTransform = imgScale.style.MsTransform = 'scale(' + scale + ')'; e.preventDefault ? e.preventDefault() : (e.returnValue = false); } onload = function() { imgScale = document.getElementById('imgScale'); var block = document.getElementById('block'); scale = 1; if (block.addEventListener) { if ('onwheel' in document) { // IE9+, FF17+, Ch31+ block.addEventListener("wheel", onWheel); } else if ('onmousewheel' in document) { // устаревший вариант события block.addEventListener("mousewheel", onWheel); } else { // Firefox < 17 block.addEventListener("MozMousePixelScroll", onWheel); } } else { // IE8- block.attachEvent("onmousewheel", onWheel); } imgScale.onmousedown = function(e) { e = e \|\| event; if (e.which == 1 \|\| e.button == 1) { pressButtom = true; var position = imgScale.getBoundingClientRect(); startTop = position.top; startLeft = position.left; startPageX = e.pageX; startPageY = e.pageY; } }; document.onmouseup = function() { pressButtom = false; imgScale.style.cursor = 'default'; }; imgScale.onmousemove = function(e) { e = e \|\| event; if (pressButtom) { var newLeft = e.pageX * scale - startPageX + startLeft; var newTop = e.pageY * scale - startPageY + startTop; imgScale.style.left = String(newLeft) + 'px'; imgScale.style.top = String(newTop) + 'px'; imgScale.style.cursor = 'move'; } return false; }; }; </script> </head> <body> <div id='block'> <img id='imgScale' src='http://vignette4.wikia.nocookie.net/simpsons/images/b/bc/Барт.png/revision/latest?cb=20130718084835&path-prefix=ru'> <button id='buttomCenterImg' onclick='cancelZoomAndPosition()'></button> </div> </body> </html> [свернуть] но оно работает коряво. 1. После зума все начинает прыгать. 2. Все это работает в chrome и opera. В firefox при перетаскивании картинки она не движется за мышкой, а срабатывает перемещение img и как отменить я не понял. 3. В сафари все просто дико виснет и что то делать просто невозможно!
0 Romanenko_o

	08.11.2016 21:09 #2
brainix Sapienti sat Регистрация: 01.01.2013 Сообщений: 1,925 Записей в дневнике: 1 Репутация: 817 Webmoney BL: ?	Юзайте jquery-ui. Там есть и зум и перетайскивание Качественный хостинг \| Отличная тизерная сеть
0 brainix

	09.11.2016 12:01 #3
Romanenko_o Новичок Регистрация: 01.11.2016 Сообщений: 2 Репутация: 0	Хотелось бы самому понять как это работает. И в чем ошибки.
0 Romanenko_o

	09.11.2016 23:54 #4
brainix Sapienti sat Регистрация: 01.01.2013 Сообщений: 1,925 Записей в дневнике: 1 Репутация: 817 Webmoney BL: ?	Сообщение от Romanenko_o Хотелось бы самому понять как это работает. У вас есть код, у вас есть гугл. Смотрите строчка за строчкой что они делают, а потом что делают в целом отдельные блоки. Качественный хостинг \| Отличная тизерная сеть
0 brainix

Темы	Раздел	Ответов	Последний пост
Отзывы Zoom Market - агентство, которое кидает людей	Кидалы	11	17.08.2015 23:39
image zoom не увеличивает	WordPress	1	13.07.2014 20:27
Помогите сделать cloud zoom на движке imagecms	Web программирование	1	08.07.2013 03:33
Реализация слайдов	WordPress	1	25.04.2013 23:45
Перемещения по директориям в программировании.	Прочее	1	22.03.2012 11:53

Реализация zoom и перемещения img.

Опции темы

Текст кода

Тэги топика:

Похожие темы

Отзывы Zoom Market - агентство, которое кидает людей

image zoom не увеличивает

Помогите сделать cloud zoom на движке imagecms

Реализация слайдов

Перемещения по директориям в программировании.

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры