Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2021, 12:36
Новичок на форуме
Отправить личное сообщение для Kenym8k Посмотреть профиль Найти все сообщения от Kenym8k
 
Регистрация: 04.12.2021
Сообщений: 4

Отключение скрипта на разрешениях меньше 1200px
Нужна помощь. У меня есть скрипт, нужно, чтобы он выполнялся, только когда ширина окна меньше 1200px. Как это сделать?

<script>
    var hoverMouse = function ($el) {
        $el.each(function () {
    var $self = $(this);
    var hover = false;
    var offsetHoverMax = $self.attr("offset-hover-max") || 0.8;
    var offsetHoverMin = $self.attr("offset-hover-min") || 0.75;

    var attachEventsListener = function () {
      $(window).on("mousemove", function (e) {
        var hoverArea = hover ? offsetHoverMax : offsetHoverMin;

        var cursor = {
          x: e.clientX,
          y: e.clientY + $(window).scrollTop()
        };

        var width = $self.outerWidth();
        var height = $self.outerHeight();

        var offset = $self.offset();
        var elPos = {
          x: offset.left + width / 2,
          y: offset.top + height / 2
        };

        var x = cursor.x - elPos.x;
        var y = cursor.y - elPos.y;

        var dist = Math.sqrt(x * x + y * y);

        var mutHover = false;

        if (dist < width * hoverArea) {
          mutHover = true;
          if (!hover) {
            hover = true;
          }
          onHover(x, y);
        }

        if (!mutHover && hover) {
          onLeave();
          hover = false;
        }
      });
    };

    var onHover = function (x, y) {
      TweenMax.to($self, 0.4, {
        x: x * 0.8,
        y: y * 0.8,
        rotation: x * 0.05,
        ease: Power2.easeOut
      });
    };
    var onLeave = function () {
      TweenMax.to($self, 0.7, {
        x: 0,
        y: 0,
        scale: 1,
        rotation: 0,
        ease: Elastic.easeOut.config(1.2, 0.4)
      });
    };

    attachEventsListener();
  });
    };
hoverMouse($(".magnetic-button"));
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2021, 13:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Kenym8k,
https://developer.mozilla.org/ru/doc...dow/matchMedia
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2021, 14:28
Новичок на форуме
Отправить личное сообщение для Kenym8k Посмотреть профиль Найти все сообщения от Kenym8k
 
Регистрация: 04.12.2021
Сообщений: 4

Сообщение от рони Посмотреть сообщение
Kenym8k,
https://developer.mozilla.org/ru/doc...dow/matchMedia
Спасибо. Вот только я дизайнер и не особо шарю, не покажешь пример кода?
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2021, 15:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Kenym8k,
строка 70
if (window.matchMedia("(max-width: 1200px)").matches) hoverMouse($(".magnetic-button"));


или строка 10

$(window).on("mousemove", function (e) {  if(window.matchMedia("(min-width: 1200px)").matches) return;

Последний раз редактировалось рони, 04.12.2021 в 15:08.
Ответить с цитированием
  #5 (permalink)  
Старый 04.12.2021, 16:50
Новичок на форуме
Отправить личное сообщение для Kenym8k Посмотреть профиль Найти все сообщения от Kenym8k
 
Регистрация: 04.12.2021
Сообщений: 4

Сообщение от рони Посмотреть сообщение
Kenym8k,
строка 70
if (window.matchMedia("(max-width: 1200px)").matches) hoverMouse($(".magnetic-button"));


или строка 10

$(window).on("mousemove", function (e) {  if(window.matchMedia("(min-width: 1200px)").matches) return;
Попробовал оба варианта, при первом скрипт перестает работать, при втором варианте скрипт отрабатывает как раньше. Есть бОльшая вероятность, что я делаю что-то не так ;(
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2021, 16:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Kenym8k,
других вариантов предложить не могу ...
Ответить с цитированием
  #7 (permalink)  
Старый 04.12.2021, 17:15
Новичок на форуме
Отправить личное сообщение для Kenym8k Посмотреть профиль Найти все сообщения от Kenym8k
 
Регистрация: 04.12.2021
Сообщений: 4

Сообщение от рони Посмотреть сообщение
Kenym8k,
других вариантов предложить не могу ...
Во втором варианте поменял "min-width: 1200px" на "max-width: 1200px" и все заработало) Больше спасибо за помощь)
Ответить с цитированием
  #8 (permalink)  
Старый 04.12.2021, 18:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Kenym8k,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отключение скрипта прокрутки во всплывающем окне komned37 Общие вопросы Javascript 2 16.08.2018 17:40
Отключение скрипта при определенном размере экрана TheSanches Общие вопросы Javascript 2 25.01.2018 15:26
Отключение скрипта при определенной ширине экрана vladislav_zp Элементы интерфейса 2 03.08.2016 09:57
Проблема с отрабатыванием скрипта на разных разрешениях K_Dmitrij jQuery 1 26.02.2016 08:44
Отключение скрипта при определенном разрешении. Нарек Events/DOM/Window 11 02.07.2014 15:22