使用拨动开关打开/关闭 Cursor 效果？

Question

I am making my portfolio website currently.我目前正在制作我的投资组合网站。 I have added a flashlight cursor effect from ( https://codemyui.com/flashlight-mouse-pointer/ ).我从（ https://codemyui.com/flashlight-mouse-pointer/ ）添加了一个手电筒 cursor 效果。 I have also added a toggle switch from codemyui also.我还从 codemyui 添加了一个拨动开关。 I am wondering if anyone knows how to link the effect & toggle together so that when I press the switch - the cursor effect turns off?我想知道是否有人知道如何将效果链接和切换在一起，以便当我按下开关时 - cursor 效果会关闭？

THANKS !!谢谢！！

Homepage with cursor effect & toggle switch主页与 cursor 效果和拨动开关

Answer 1

What you need is set a new class on <html> element when toggle switch is on and apply torch effect only when such class is present:当切换开关打开时，您需要在<html>元素上设置一个新的 class 并仅在存在此类 class 时应用手电筒效果：

 function update(e) { var x = e.touches? e.touches[0].clientX: e.clientX; var y = e.touches? e.touches[0].clientY: e.clientY; document.documentElement.style.setProperty('--cursorX', x + 'px') document.documentElement.style.setProperty('--cursorY', y + 'px') } document.addEventListener('mousemove',update) document.addEventListener('touchmove',update) const torchInput = document.getElementById("torch"); torchInput.addEventListener("input", torchToggle); function torchToggle() { document.documentElement.classList.toggle("torch", torchInput.checked); } torchToggle();

 /* Flashlight Overlay */:root.torch { cursor: none; --cursorX: 50vw; --cursorY: 50vh; }:root.torch:before { content: ''; display: block; width: 100%; height: 100%; position: fixed; pointer-events: none; background: radial-gradient( circle 10vmax at var(--cursorX) var(--cursorY), rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.95) 100% ) } html { box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 100%; } *, *:before, *:after { box-sizing: inherit; margin:0; padding:0; }.mid { display: flex; align-items: center; justify-content: center; padding-top:1em; } /* Switch starts here */.rocker { display: inline-block; position: relative; /* SIZE OF SWITCH ============== All sizes are in em - therefore changing the font-size here will change the size of the switch. See.rocker-small below as example. */ font-size: 2em; font-weight: bold; text-align: center; text-transform: uppercase; color: #888; width: 7em; height: 4em; overflow: hidden; border-bottom: 0.5em solid #eee; }.rocker-small { font-size: 0.75em; /* Sizes the switch */ margin: 1em; }.rocker::before { content: ""; position: absolute; top: 0.5em; left: 0; right: 0; bottom: 0; background-color: #999; border: 0.5em solid #eee; border-bottom: 0; }.rocker input { opacity: 0; width: 0; height: 0; }.switch-left, .switch-right { cursor: pointer; position: absolute; display: flex; align-items: center; justify-content: center; height: 2.5em; width: 3em; transition: 0.2s; }.switch-left { height: 2.4em; width: 2.75em; left: 0.85em; bottom: 0.4em; background-color: #ddd; transform: rotate(15deg) skewX(15deg); }.switch-right { right: 0.5em; bottom: 0; background-color: #bd5757; color: #fff; }.switch-left::before, .switch-right::before { content: ""; position: absolute; width: 0.4em; height: 2.45em; bottom: -0.45em; background-color: #ccc; transform: skewY(-65deg); }.switch-left::before { left: -0.4em; }.switch-right::before { right: -0.375em; background-color: transparent; transform: skewY(65deg); } input:checked +.switch-left { background-color: #0084d0; color: #fff; bottom: 0px; left: 0.5em; height: 2.5em; width: 3em; transform: rotate(0deg) skewX(0deg); } input:checked +.switch-left::before { background-color: transparent; width: 3.0833em; } input:checked +.switch-left +.switch-right { background-color: #ddd; color: #888; bottom: 0.4em; right: 0.8em; height: 2.4em; width: 2.75em; transform: rotate(-15deg) skewX(-15deg); } input:checked +.switch-left +.switch-right::before { background-color: #ccc; } /* Keyboard Users */ input:focus +.switch-left { color: #333; } input:checked:focus +.switch-left { color: #fff; } input:focus +.switch-left +.switch-right { color: #fff; } input:checked:focus +.switch-left +.switch-right { color: #333; }

 <div class="mid"> <label class="rocker"> <input id="torch" type="checkbox" checked> <span class="switch-left">On</span> <span class="switch-right">Off</span> </label> </div> <!-- Any website --> <header> <h1>Hidden Website</h1> </header> <main> <section> <article> <h2>Hidden Headline</h2> <p>test</p> </article> </section> </main> <footer>footer content</footer>

使用拨动开关打开/关闭 Cursor 效果？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-05-28 02:00:31

使用拨动开关打开/关闭 Cursor 效果？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-05-28 02:00:31

解决方案1
0 已采纳 2021-05-28 02:00:31