[英]How do I get my Javascript to show just one spotlight centred on the mouse?
在我的網站的頂部,您可以看到我的動畫位於頂部,但是我很難讓它僅顯示一個集中在鼠標上的聚光燈,同時還使文本陰影效果也集中在鼠標上。
我發現通過放大瀏覽器可以解決居中問題,但如果可能的話,我寧願不為訪問者設置固定的縮放級別。
下面,我附上了CSS,然后附上了我使用過的JavaScript:
CSS:
#text-shadow-box {
position: relative;
width: 100%;
height: 350px;
background: #666;
overflow: hidden;
cursor: none;
border: 1px solid Black;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
}
#text-shadow-box div.wall {
position: absolute;
top: 175px;
left: 0;
width: 100%;
}
#tsb-text {
margin: 0;
color: #999;
font-family: Helvetica, Arial, sans-serif;
font-size: 80px;
line-height: 1em;
height: 1px;
font-weight: bold;
text-align: center;
}
div.wall div {
position: absolute;
background: #999;
overflow: hidden;
top: 150px;
left: 0;
height: 300px;
width: 100%;
}
#tsb-spot {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(/spotlight.png) top center;
}
JavaScript:
<script type="text/javascript" language="javascript" charset="utf-8">
var text;
var spot;
///window.onload = init;
init();
function init() {
text = document.getElementById('tsb-text');
spot = document.getElementById('tsb-spot');
document.getElementById('text-shadow-box').onmousemove = onMouseMove;
document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
onMouseMove({clientX: 300, clientY: 200});
}
function onMouseMove(e) {
var xm = e.clientX - 300;
var ym = e.clientY - 175;
var d = Math.sqrt(xm*xm + ym*ym);
text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
xm = e.clientX - 600;
ym = e.clientY - 450;
spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}
</script>
在當前的實現中,您正在使用圖像作為聚光燈,該圖像位於以下行:
background: url(http://www.zachstronaut.com/lab/text-shadow-box/spotlight.png) top center;
更好的實現是在您的標題當前位於網站的位置添加<canvas>
元素。 您可以使用CanvasRenderingContext2D.createRadialGradient()
創建聚光燈效果: https : //developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient 。
您還可以在這里看到一些我建議的類似實現:
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.