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

(Ответов: 3, Просмотров: 373)
  1. Новичок
    • Регистрация: 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
  2. Sapienti sat Аватар для brainix
    • Регистрация: 01.01.2013
    • Сообщений: 1,932
    • Записей в дневнике: 1
    • Репутация: 817
    • Webmoney BL: ?
    Юзайте jquery-ui. Там есть и зум и перетайскивание
    • 0
  3. Новичок
    • Регистрация: 01.11.2016
    • Сообщений: 2
    • Репутация: 0
    Хотелось бы самому понять как это работает. И в чем ошибки.
    • 0
  4. Sapienti sat Аватар для brainix
    • Регистрация: 01.01.2013
    • Сообщений: 1,932
    • Записей в дневнике: 1
    • Репутация: 817
    • Webmoney BL: ?
    Цитата Сообщение от Romanenko_o Посмотреть сообщение
    Хотелось бы самому понять как это работает.
    У вас есть код, у вас есть гугл. Смотрите строчка за строчкой что они делают, а потом что делают в целом отдельные блоки.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Отзывы 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

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

Вы можете попросить инвайт у любого модератора:

Информеры