Удалить пользовательский курсор на сенсорном экране - PullRequest
Новая
       7

Удалить пользовательский курсор на сенсорном экране

0 голосов
/ 11 октября 2019

У меня есть собственный курсор, который я реализовал, используя несколько JS, найденных здесь. Это работает отлично - НО, мне нужно отключить его на сенсорных экранах, иначе он просто сидит на экране как большая желтая точка.

К сожалению, кроме встроенных стилей, я не понимаю JSДостаточно отредактировать его, чтобы добиться этого.

Это JS 

$("body").append('<div class="cursor"></div>');
$("html").append('<style>html, body, .msty_notcur {cursor:none !important;}.cursor {z-index:10000000000000; mix-blend-mode: difference; position: fixed;background-color:#FDFF07; width:25px;height:25px;border-radius:100%;transform:translate(-50%,-50%);top:0px;left:0px;pointer-events:none; -webkit-transition: width 200ms, height 300ms; -webkit-transition: height 200ms, width:300ms; } .overlink {width:45px;height:45px; -webkit-transition: width 300ms, height 300ms; -webkit-transition: height 200ms, width:200ms;} .overtext {background-color:rgba(100,100,255,0.25) !important;border: 1px solid rgba(0,0,100,0.25) !important;}</style>');
var scrollY = 0, scrollX = 0;
$(document).mousemove(function(e){
   $(".cursor").css("top",e.pageY - scrollY + "px").css("left",e.pageX - scrollX + "px");
});
$(document).scroll(function(e){
   scrollY = $(window).scrollTop();
   scrollX = $(window).scrollLeft();
});
setInterval(function(){scroll = $(window).scrollTop();}, 1000);
$("*").hover(function(e){
   var index = -1;
   try {
      index = $(this).attr("class").toLowerCase().indexOf("button");
      if (index == -1) {
         index = $(this).attr("class").toLowerCase().indexOf("link");
      }
   }
   catch(e) {
      index = -1;
   }
   if($(this).css("cursor") == "pointer" || $(this).get(0).tagName == "A" || $(this).get(0).tagName == "BUTTON" || $(this).hasClass("msty_cur") || index > -1) {
      $(this).addClass("msty_cur");
      $(this).css("cursor","none");
      $(".cursor").addClass("overlink");
   }
   if($(this).css("cursor") != "none") {
      $(this).addClass("msty_notcur")
   }
}, function(e){
   $(this).css("cursor","none");
   $(".cursor").removeClass("overlink");
});

И веб-сайт, на котором это реализовано, здесь

СложностьУ меня с использованием только CSS применяется режим смешивания смешивания для курсора

1 Ответ

0 голосов
/ 11 октября 2019

Используя JavaScript, лучше всего попытаться определить размер экрана. Похоже, 768 - это безопасная ставка для максимальной ширины .

. Вы хотите добавить оба условных оператора (для загрузки страницы) onresize для документа. Я бы также обернул создание курсора в функцию для повторного использования / удобства. 

customCursor = () => {
  $("body").append('<div class="cursor"></div>');
  $("html").append('<style>.cursor {z-index:10000000000000; mix-blend-mode: difference; position: fixed;background-color:#FDFF07; width:25px;height:25px;border-radius:100%;transform:translate(-50%,-50%);top:0px;left:0px;pointer-events:none; -webkit-transition: width 200ms, height 300ms; -webkit-transition: height 200ms, width:300ms; } .overlink {width:45px;height:45px; -webkit-transition: width 300ms, height 300ms; -webkit-transition: height 200ms, width:200ms;} .overtext {background-color:rgba(100,100,255,0.25) !important;border: 1px solid rgba(0,0,100,0.25) !important;}</style>');

  var scrollY = 0,
    scrollX = 0;

  $(document).mousemove(function(e) {
    $(".cursor").css("top", e.pageY - scrollY + "px").css("left", e.pageX - scrollX + "px");
  });
  $(document).scroll(function(e) {
    scrollY = $(window).scrollTop();
    scrollX = $(window).scrollLeft();
  });
  setInterval(function() {
    scroll = $(window).scrollTop();
  }, 1000);
  $("*").hover(function(e) {
    var index = -1;

    try {

      index = $(this).attr("class").toLowerCase().indexOf("button");
      if (index == -1) {
        index = $(this).attr("class").toLowerCase().indexOf("link");
      }
    } catch (e) {
      index = -1;
    }
    if ($(this).css("cursor") == "pointer" || $(this).get(0).tagName == "A" || $(this).get(0).tagName == "BUTTON" || $(this).hasClass("msty_cur") || index > -1) {

      $(this).addClass("msty_cur");
      $(this).css("cursor", "none");
      $(".cursor").addClass("overlink");
    }
    if ($(this).css("cursor") != "none") {
      $(this).addClass("msty_notcur")
    }
  }, function(e) {
    $(this).css("cursor", "none");
    $(".cursor").removeClass("overlink");
  });
}

if (window.innerWidth <= 768) {
  document.getElementsByTagName('BODY')[0].style.cursor = 'default'
} else {
  customCursor()
}

$(window).resize(function() {
  if (window.innerWidth <= 768) {
    var cursor = $(".cursor")
    cursor.remove()
    $('body').css({
      cursor: "default",
    })
  } else {
    $('body').css({
      cursor: "none",
    })
    customCursor()
  }
});

Честно говоря, ваш лучший выбор - использовать CSS больше, чем использовать jQuery для добавления / манипулирования вещами, но это ваше дело.

...