Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

Масштабирование страницы колёсиком мыши

Подскажите, как реализовать масштабирование страницы колёсиком мыши, без применения каких-либо клавиш дополнительно?


Ответ

Благодарю за помощь, сам разобрался.Вот кому интересно: //Реализация масштабирования при помощи скролинга колёсиком мыши
//Переменные var delta; // Направление колёсика мыши //Объявление переменной значения зума var isCall = false; if(!isCall){ var zoom = 1; isCall = true;//Чтобы начальное значение было присвоено 1 раз }
//Функция для добавления обработчика событий function addHandler(object, event, handler){ if(object.addEventListener){ object.addEventListener(event, handler, false); }else if(object.attachEvent){ object.attachEvent('on' + event, handler); }else alert("Обработчик не поддерживается"); }
// Добавляем обработчики для разных браузеров addHandler(window, 'DOMMouseScroll', wheel); addHandler(window, 'mousewheel', wheel); addHandler(document, 'mousewheel', wheel);
// Функция, обрабатывающая событие function wheel(event){ event = event || window.event; // Opera и IE работают со свойством wheelDelta if (event.wheelDelta){ // В Opera и IE delta = event.wheelDelta / 120; // В Опере значение wheelDelta такое же, но с противоположным знаком if (window.opera){ delta = -delta;// Дополнительно для Opera } }else if(event.detail){ // Для Gecko delta = -event.detail / 3; } // Запрещаем обработку события браузером по умолчанию if (event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false;//Для ослика }
//Выполняем зум if(delta > 0){ zoom += 0.1;//Шаг document.body.style.MozTransform = zoom; // для FireFox document.body.style.OTransform = zoom; // для Opera document.body.style.zoom = zoom; }else{ zoom -= 0.1;//Шаг document.body.style.MozTransform = zoom; // для FireFox document.body.style.OTransform = zoom; // для Opera document.body.style.zoom = zoom; } }

Комментариев нет:

Отправить комментарий