如何让我的Javascript只显示一个以鼠标为中心的聚光灯
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.
你也可以看到我在这里推荐的一些类似的实现:
https://jsfiddle.net/4Ezkg/
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
相关文章:
- 为什么window.open不打开一个以变量形式给出的链接
- 如何获取一个以零开头的数字的位数
- 我如何在谷歌chrome中调试一个以编程方式注入的JS文件
- 如何让我的Javascript只显示一个以鼠标为中心的聚光灯
- Javascript正则表达式匹配多个单词中至少一个以数字开头的单词,但至少匹配两个单词
- 如何停止多次单击下一个以破坏我的图像旋转器
- 你如何制作一个以具有特定标签的地址为中心的谷歌地图
- 在 JavaScript 中创建一个以字符串参数命名的变量
- 如何创建一个以模型为参数的ajax成功方法
- 用Javascript对一个以特定字符串开头的数组进行排序
- 我怎么能在一个URL中有两种类型的参数,其中一种以“”开头#"而另一个以“0”开头&"并且不替
- AJAX - 同时运行两个请求,但其中一个以一定的间隔重复运行
- 使用JavascriptExecutor selenium创建一个以链接为背景的图像
- Regex-唐't匹配一个以javascript中的字符串开头的组
- 使用JSON Path查找一个以某些内容开头的JSON属性名称
- 如何检查鼠标是否以纯javascript输入iframe
- 我得到一个以字符串格式存储的javascript代码想要转换为纯javascript
- 未捕获的类型错误:this.$.AjaxPost.go不是一个以函数为核心的ajax
- 如何在按住鼠标左键的情况下获取鼠标位置以在web中选择和拖动文本
- 能够创建一个以字符串为键的映射,但当引用该键时;意外的数字错误"