0

我有一个自定义光标，我使用在这里找到的一些 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 的困难是将 mix-blend-mode 应用于光标

4

1 回答 1

0

使用 JavaScript，最好的办法是尝试检测屏幕大小。看起来768 是 max-width 的安全选择。

您想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 来附加/操作东西，但这取决于你。

于 2019-10-11T16:04:02.643 回答