[英]How do I disable the script for the mobile version of the site?
I customized the cursor on my site.我在我的网站上定制了 cursor。 It is now in the shape of a dot.
它现在是一个点的形状。 But when I click anywhere on the mobile version of the site, that dot appears.
但是当我点击网站移动版的任何地方时,那个点就会出现。 This is very disturbing.
这非常令人不安。 How do I disable the code for the mobile version of the site?
如何禁用网站移动版本的代码? I need the script not to work on devices less than 1200 pixels wide
我需要脚本不能在宽度小于 1200 像素的设备上运行
<style>
html,
html *,
body,
body * {
cursor: none;
}
.cursor-dot,
.cursor-dot-outline {
mix-blend-mode: difference;
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
opacity: 0;
position: fixed;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.cursor-dot {
z-index:99999999;
width: 10.0px;
height: 10.0px;
background-color: rgba(255, 255, 255, 1.00);
border: solid;
border-radius: 50%;
border-width: 0px;
border-color: #000;
}
.cursor-dot-outline {
z-index:99999998;
width: 0.0px;
height: 0.0px;
background-color: rgba(169, 169, 222, 0.2);
border: solid;
border-radius: 50%;
border-width: 0px;
border-color: #000;
}
</style>
<script>
$("body").prepend('<div class="cursor-dot-outline"></div>');
$("body").prepend('<div class="cursor-dot"></div>');
var cursor = {
delay: 8,
_x: 0,
_y: 0,
endX: (window.innerWidth / 2),
endY: (window.innerHeight / 2),
cursorVisible: true,
cursorEnlarged: false,
$dot: document.querySelector('.cursor-dot'),
$outline: document.querySelector('.cursor-dot-outline'),
init: function() {
this.dotSize = this.$dot.offsetWidth;
this.outlineSize = this.$outline.offsetWidth;
this.setupEventListeners();
this.animateDotOutline();
},
setupEventListeners: function() {
var self = this;
document.querySelectorAll('a').forEach(function(el) {
el.addEventListener('mouseover', function() {
self.cursorEnlarged = true;
self.toggleCursorSize();
});
el.addEventListener('mouseout', function() {
self.cursorEnlarged = false;
self.toggleCursorSize();
});
});
document.addEventListener('mousedown', function() {
self.cursorEnlarged = true;
self.toggleCursorSize();
});
document.addEventListener('mouseup', function() {
self.cursorEnlarged = false;
self.toggleCursorSize();
});
document.addEventListener('mousemove', function(e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.endX = e.clientX;
self.endY = e.clientY;
self.$dot.style.top = self.endY + 'px';
self.$dot.style.left = self.endX + 'px';
});
document.addEventListener('mouseenter', function(e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$dot.style.opacity = 1;
self.$outline.style.opacity = 1;
});
document.addEventListener('mouseleave', function(e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$dot.style.opacity = 0;
self.$outline.style.opacity = 0;
});
},
animateDotOutline: function() {
var self = this;
self._x += (self.endX - self._x) / self.delay;
self._y += (self.endY - self._y) / self.delay;
self.$outline.style.top = self._y + 'px';
self.$outline.style.left = self._x + 'px';
requestAnimationFrame(this.animateDotOutline.bind(self));
},
toggleCursorSize: function() {
var self = this;
if (self.cursorEnlarged) {
self.$dot.style.transform = 'translate(-50%, -50%) scale(4)';
self.$outline.style.transform = 'translate(-50%, -50%) scale(0)';
} else {
self.$dot.style.transform = 'translate(-50%, -50%) scale(1)';
self.$outline.style.transform = 'translate(-50%, -50%) scale(1)';
}
},
toggleCursorVisibility: function() {
var self = this;
if (self.cursorVisible) {
self.$dot.style.opacity = 1;
self.$outline.style.opacity = 1;
} else {
self.$dot.style.opacity = 0;
self.$outline.style.opacity = 0;
}
}
}
cursor.init();
</script>
You can place this at the beginning of the script:您可以将其放在脚本的开头:
if(window.innerWidth < 1200) {
throw new Error("Site is on mobile")
}
This will stop the execution of the script if the width is under 1200, as you want.如果宽度低于 1200,这将停止脚本的执行,如您所愿。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.