Javascript-鼠標跟隨+照明？

Question

我正在練習Javascript，所以我做了一個鼠標跟隨功能。 我知道了，但是現在我有了一個新主意，我不確定這是可能的。

有沒有辦法使鼠標跟隨一個“視覺球”，以便使該區域中的所有內容都可見？ 。 有點像使用割炬，以查看鼠標所在的小區域。

注意：我並不是要有人為我編寫代碼，而是要解釋一下，因為我很想自己學習，但是我確實需要一個指導！**

 function mouseMovement(e) { var x = document.getElementById('x_show'); var y = document.getElementById('y_show'); x.innerHTML = e.clientX; y.innerHTML = e.clientY; document.getElementById("followDiv").style.left = event.clientX - 15 + "px"; document.getElementById("followDiv").style.top = event.clientY - 15 + "px"; } document.onmousemove = mouseMovement;

 #followDiv { background-color: lightblue; height: 30px; width: 30px; position: absolute; }

 <p id="x_show">0</p> <p id="y_show">0</p> <div id="followDiv"></div>

Answer 1

一種非畫布方式是：

將頁面背景設置為黑色
使用“邊界半徑：50％”對#followDiv的邊界進行四舍五入。
將此div的背景設置為image
播放背景位置以與鼠標相反

編輯：

通過使用盒子陰影柔化邊緣進行最后的觸摸

 function mouseMovement(e) { var x = document.getElementById('x_show'); var y = document.getElementById('y_show'); x.innerHTML = e.clientX; y.innerHTML = e.clientY; var followDiv = document.getElementById("followDiv"); followDiv.style.left = event.clientX - 60 + "px"; followDiv.style.top = event.clientY - 60 + "px"; followDiv.style.backgroundPositionX = (-event.clientX) + 'px'; followDiv.style.backgroundPositionY = (-event.clientY) + 'px'; } document.onmousemove = mouseMovement;

 body { background: black; } #followDiv { background-color: lightblue; height: 120px; width: 120px; position: absolute; border-radius: 50%; box-shadow: 0 0 12px 12px black inset, /* workaround for a soft edge issue : http://stackoverflow.com/a/37460870/5483521 */ 0 0 2px 2px black inset, 0 0 2px 2px black inset, 0 0 2px 2px black inset; background: url(https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg) no-repeat; }

 <p id="x_show">0</p> <p id="y_show">0</p> <div id="followDiv"></div>

Answer 2

@Bulent Vural，這是我的解決方案。 但是我無法使圓圈“變小”，因為我必須重新調整其大小以適合屏幕，這不適用於％的圓圈。

唯一可行的方法是添加大量的“黑色，黑色，黑色”。 這不是很令人愉快。

  function mouseMovement(e) { var x = document.getElementById('x_show'); var y = document.getElementById('y_show'); x.innerHTML = e.clientX; y.innerHTML = e.clientY; document.getElementById("followDiv").style.left = event.clientX-2000+"px"; document.getElementById("followDiv").style.top = event.clientY-2000+"px"; } document.onmousemove = mouseMovement; </script>

  html, body {margin: 0; height: 100%; overflow: hidden} #followDiv { /* background-color: lightblue; */ height: 4000px; width: 4000px; position: absolute; background: -webkit-radial-gradient(circle, rgba(248, 255, 252, 0),black); background: -o-radial-gradient(circle, rgba(248, 255, 252, 0),black); background: -moz-radial-gradient(circle, rgba(248, 255, 252, 0),black); background: radial-gradient(circle, rgba(248, 255, 252, 0),black); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="x_show">0</p> <p id="y_show">0</p> <div id="followDiv"></div> </body>

Answer 3

我認為這可以幫助您所需。

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } window.onresize=function(e){ reOffset(); } $("#canvas").mousemove(function(e){handleMouseMove(e);}); var radius=30; var img=new Image(); img.onload=function(){ draw(150,150,30); } img.src='https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg' function draw(cx,cy,radius){ ctx.save(); ctx.clearRect(0,0,cw,ch); var radialGradient = ctx.createRadialGradient(cx, cy, 1, cx, cy, radius); radialGradient.addColorStop(0, 'rgba(0,0,0,1)'); radialGradient.addColorStop(.65, 'rgba(0,0,0,1)'); radialGradient.addColorStop(1, 'rgba(0,0,0,0)'); ctx.beginPath(); ctx.arc(cx,cy,radius,0,Math.PI*2); ctx.fillStyle=radialGradient; ctx.fill(); ctx.globalCompositeOperation='source-atop'; ctx.drawImage(img,0,0); ctx.globalCompositeOperation='destination-over'; ctx.fillStyle='black'; ctx.fillRect(0,0,cw,ch); ctx.restore(); } function handleMouseMove(e){ // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); draw(mouseX,mouseY,30); }

 body{ background-color: ivory; } #canvas{border:1px solid red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>Move mouse to reveal image with "flashlight"</h4> <canvas id="canvas" width=300 height=300></canvas>

Javascript-鼠標跟隨+照明？

問題描述

3 個解決方案

解決方案1
2 已采納 2017-02-16 23:51:32

解決方案2
0 2017-02-17 00:00:20

解決方案3
-1 2017-02-16 23:57:24

Javascript-鼠標跟隨+照明？

問題描述

3 個解決方案

解決方案1 2 已采納 2017-02-16 23:51:32

解決方案2 0 2017-02-17 00:00:20

解決方案3 -1 2017-02-16 23:57:24

解決方案1
2 已采納 2017-02-16 23:51:32

解決方案2
0 2017-02-17 00:00:20

解決方案3
-1 2017-02-16 23:57:24