[i]聚光灯效果：http://webcodingeasy.com/my_classes/js/spotlight/mouse_example.html
但是这个效果是做在canvas上的，所以里面的按钮是不能点的。我想在页面上放上一些图片，图片有链接到别的网页，同时在页面上有这样的聚光灯效果。有没有方法实现？非常感谢
但是这个效果是做在canvas上的，所以里面的按钮是不能点的。我想在页面上放上一些图片，图片有链接到别的网页，同时在页面上有这样的聚光灯效果。有没有方法实现？非常感谢
其中 e.clientX、e.clientY 就是点击时的鼠标坐标位置
你完全可以利用这个坐标来做些事情
撸主提供的例子的源码用的是canvas画布做的，半透明层+指定部位镂空，用的是canvas里的渐变生成器生成的，其实就是一个径向渐变，控制好color-stop就行呢。我模仿着用css3里的渐变写了一个，效果没canvas写的好。请使用chrome查看，如果没有效果，请更新chrome的版本试试，本人版本 30.0.1599.14.<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Website heading</h1>
<div id='text' style='width: 800px;'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam elit. Duis sollicitudin, tellus eu porttitor fermentum, dolor libero malesuada eros, accumsan tempor dolor libero quis leo. Phasellus interdum vehicula dignissim. Cras iaculis cursus neque id pretium. Aliquam feugiat suscipit condimentum. Maecenas non sollicitudin enim. Mauris neque nisl, consectetur et aliquet non, mollis quis urna. Nunc condimentum faucibus massa, in tempus leo eleifend sit amet. Ut ultrices quam lacus. Integer id tellus in quam commodo porttitor ut nec tortor.</p><p>Praesent et justo neque, non tincidunt neque. Duis molestie mauris ut velit cursus eget imperdiet turpis viverra. In dapibus ipsum diam, sed gravida erat. Nunc vulputate venenatis magna, non faucibus nisi tincidunt at. Pellentesque eu eleifend leo. Vivamus eros enim, elementum nec laoreet sed, tempus semper lacus. Morbi imperdiet dolor a ligula suscipit adipiscing. Morbi sed sapien et mauris commodo tempus et vitae velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis ipsum, eleifend in tristique nec, adipiscing non tellus. Etiam non scelerisque diam. Maecenas tristique posuere dictum.</p><p>Etiam adipiscing libero nec ligula suscipit bibendum. Phasellus in augue quis mauris pulvinar varius et id neque. Pellentesque risus justo, cursus sed tristique ac, gravida et felis. Cras et augue sed lectus ullamcorper sollicitudin vel eget magna. Praesent et turpis quam, nec sollicitudin purus. Quisque porta, metus a egestas condimentum, nibh dolor varius nisi, sit amet feugiat lorem nunc a tortor. Curabitur viverra rutrum dolor. Mauris eget nibh non lacus elementum commodo id vel quam. Praesent eget nisi eu mi porttitor fermentum.</p> <p>Fusce quis leo sagittis quam scelerisque tempor. Praesent posuere pretium tempus. Donec mattis condimentum dolor non pellentesque. Nullam a egestas nisi. Quisque nec nibh quis sem vulputate posuere. Maecenas est leo, pellentesque sed cursus et, dignissim a magna. Sed commodo augue dapibus sem placerat ac accumsan urna convallis. Nulla augue orci, auctor et tempor a, fringilla eu leo. Donec ut leo nec augue adipiscing dignissim.</p><p>Sed ac nibh risus, non malesuada nisl. Maecenas id justo neque. Vivamus tincidunt quam ac nisl sollicitudin a auctor enim convallis. Nam eget lorem eget turpis aliquet varius at eu nunc. Sed ut ante dui. Sed elementum vulputate tellus vitae laoreet. Nullam sodales ornare arcu, vitae tempor leo placerat quis.</p>
</div>
<script type="text/javascript">
function MySpotlight(){
var h = document.body.scrollHeight;
var w = 810;
var wh = Math.max(w,h);
var mask, style;
this.mask = mask = document.createElement('div');
style = "width:"+w+"px;height:"+h+"px; background-size: "+wh+"px "+wh+"px; background-repeat: no-repeat; position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-attachment:fixed;";
mask.setAttribute('style',style);
document.body.appendChild(mask);
this.show(0,0);
}MySpotlight.prototype.show = function(x,y){
this.mask.style.backgroundImage = "-webkit-radial-gradient("+x+"px "+y+"px, circle, rgba(0, 0, 0, 0) 0, rgba(141, 141, 141, 0.3) 70px,rgba(0, 0, 0, 0.3) 100px,rgba(0, 0, 0, 0.8) 100px,rgba(0, 0, 0, 0.8))"
}
</script>
<script type='text/javascript'>
var sp = new MySpotlight();
document.onmousemove = function(e){
sp.show(e.clientX, e.clientY);
};
</script>
</body>
</html>
<html>
<head>
<style type="text/css">
body{overflow:hidden;}
#light {position:absolute;left:0;top:0;z-index:2001;height:200px;width:200px;border:100px solid rgba(0, 0, 0, 0.6);border-radius:200px;
border:1px solid #000\9;background-color:green\9;filter:progid:DXImageTransform.Microsoft.Chroma(color=green) progid:DXImageTransform.Microsoft.Alpha(opacity=60)\9;
}</style></head>
<body scroll=0>
<h1>Website heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam elit. Duis sollicitudin, tellus eu porttitor fermentum, dolor libero malesuada eros, accumsan tempor dolor libero quis leo. Phasellus interdum vehicula dignissim. Cras iaculis cursus neque id pretium. Aliquam feugiat suscipit condimentum. Maecenas non sollicitudin enim. Mauris neque nisl, consectetur et aliquet non, mollis quis urna. Nunc condimentum faucibus massa, in tempus leo eleifend sit amet. Ut ultrices quam lacus. Integer id tellus in quam commodo porttitor ut nec tortor.</p><p>Praesent et justo neque, non tincidunt neque. Duis molestie mauris ut velit cursus eget imperdiet turpis viverra. In dapibus ipsum diam, sed gravida erat. Nunc vulputate venenatis magna, non faucibus nisi tincidunt at. Pellentesque eu eleifend leo. Vivamus eros enim, elementum nec laoreet sed, tempus semper lacus. Morbi imperdiet dolor a ligula suscipit adipiscing. Morbi sed sapien et mauris commodo tempus et vitae velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis ipsum, eleifend in tristique nec, adipiscing non tellus. Etiam non scelerisque diam. Maecenas tristique posuere dictum.</p><p>Etiam adipiscing libero nec ligula suscipit bibendum. Phasellus in augue quis mauris pulvinar varius et id neque. Pellentesque risus justo, cursus sed tristique ac, gravida et felis. Cras et augue sed lectus ullamcorper sollicitudin vel eget magna. Praesent et turpis quam, nec sollicitudin purus. Quisque porta, metus a egestas condimentum, nibh dolor varius nisi, sit amet feugiat lorem nunc a tortor. Curabitur viverra rutrum dolor. Mauris eget nibh non lacus elementum commodo id vel quam. Praesent eget nisi eu mi porttitor fermentum.</p> <p>Fusce quis leo sagittis quam scelerisque tempor. Praesent posuere pretium tempus. Donec mattis condimentum dolor non pellentesque. Nullam a egestas nisi. Quisque nec nibh quis sem vulputate posuere. Maecenas est leo, pellentesque sed cursus et, dignissim a magna. Sed commodo augue dapibus sem placerat ac accumsan urna convallis. Nulla augue orci, auctor et tempor a, fringilla eu leo. Donec ut leo nec augue adipiscing dignissim.</p><p>Sed ac nibh risus, non malesuada nisl. Maecenas id justo neque. Vivamus tincidunt quam ac nisl sollicitudin a auctor enim convallis. Nam eget lorem eget turpis aliquet varius at eu nunc. Sed ut ante dui. Sed elementum vulputate tellus vitae laoreet. Nullam sodales ornare arcu, vitae tempor leo placerat quis.
</p>
<div id='light'></div>
<script type='text/javascript'>
var w = screen.width;
var l = document.getElementById('light');
l.style.borderWidth = (w+200)+'px';
l.style.borderRadius = w*2+'px';
l.style.top = l.style.left = (-w-200)+'px';
document.onmousemove = function(e){
with(l.style)
{
left =((e&&e.clientX?e.clientX:event.clientX)-w-300)+'px';
top = ((e&&e.clientY?e.clientY:event.clientY)-w-300)+'px';
}
};
</script>
</body>
</html>如果想在IE下也是圆形的话，请改用progid:DXImageTransform.Microsoft.Light滤镜
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#outer {position:absolute;left:0;top:0;z-index:2000;width:100%;height:100%;background:#000;filter:progid:DXImageTransform.Microsoft.Chroma(color=#ffffff) progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
#light {position:absolute;left:0;top:0;z-index:2001;font:800px/1 Arial;color:#fff;}
</style>
</head>
<body>
<h1>Website heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam elit. Duis sollicitudin, tellus eu porttitor fermentum, dolor libero malesuada eros, accumsan tempor dolor libero quis leo. Phasellus interdum vehicula dignissim. Cras iaculis cursus neque id pretium. Aliquam feugiat suscipit condimentum. Maecenas non sollicitudin enim. Mauris neque nisl, consectetur et aliquet non, mollis quis urna. Nunc condimentum faucibus massa, in tempus leo eleifend sit amet. Ut ultrices quam lacus. Integer id tellus in quam commodo porttitor ut nec tortor.</p><p>Praesent et justo neque, non tincidunt neque. Duis molestie mauris ut velit cursus eget imperdiet turpis viverra. In dapibus ipsum diam, sed gravida erat. Nunc vulputate venenatis magna, non faucibus nisi tincidunt at. Pellentesque eu eleifend leo. Vivamus eros enim, elementum nec laoreet sed, tempus semper lacus. Morbi imperdiet dolor a ligula suscipit adipiscing. Morbi sed sapien et mauris commodo tempus et vitae velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis ipsum, eleifend in tristique nec, adipiscing non tellus. Etiam non scelerisque diam. Maecenas tristique posuere dictum.</p><p>Etiam adipiscing libero nec ligula suscipit bibendum. Phasellus in augue quis mauris pulvinar varius et id neque. Pellentesque risus justo, cursus sed tristique ac, gravida et felis. Cras et augue sed lectus ullamcorper sollicitudin vel eget magna. Praesent et turpis quam, nec sollicitudin purus. Quisque porta, metus a egestas condimentum, nibh dolor varius nisi, sit amet feugiat lorem nunc a tortor. Curabitur viverra rutrum dolor. Mauris eget nibh non lacus elementum commodo id vel quam. Praesent eget nisi eu mi porttitor fermentum.</p> <p>Fusce quis leo sagittis quam scelerisque tempor. Praesent posuere pretium tempus. Donec mattis condimentum dolor non pellentesque. Nullam a egestas nisi. Quisque nec nibh quis sem vulputate posuere. Maecenas est leo, pellentesque sed cursus et, dignissim a magna. Sed commodo augue dapibus sem placerat ac accumsan urna convallis. Nulla augue orci, auctor et tempor a, fringilla eu leo. Donec ut leo nec augue adipiscing dignissim.</p><p>Sed ac nibh risus, non malesuada nisl. Maecenas id justo neque. Vivamus tincidunt quam ac nisl sollicitudin a auctor enim convallis. Nam eget lorem eget turpis aliquet varius at eu nunc. Sed ut ante dui. Sed elementum vulputate tellus vitae laoreet. Nullam sodales ornare arcu, vitae tempor leo placerat quis.
</p>
<div id='outer'><div id='light'>•</div></div>
<script type='text/javascript'>
var l = document.getElementById('light');
var w = parseInt(l.offsetWidth/2);
var h = parseInt(l.offsetHeight/2);
l.style.cssText = 'top:-'+h+'px;left:-'+w+'px;';
document.onmousemove = function(e){
with(l.style){
left =(event.clientX-w)+'px';
top = (event.clientY-h)+'px';
}
};
</script>
</body>
</html>