前端特效开发 | JS实现聚光灯看图效果
前端特效开发 | JS实现聚光灯看图效果
HTML5学堂（码匠）：昏暗的场景下，查看任何的图片、效果都会给人不适的感觉，所以人们往往喜欢在明亮的场景中来体验世界的美好。 对于前端开发来说，想要让用户能在更明亮的状态下查看各种图片，那就必须为页面增加上一个“镁光灯”。
本文主要内容
1. 效果展示
2. 实现的原理分析
3. 案例实现
1. 效果展示
如上的效果中，可以实现对查看的图片实现聚光效果。当用户的鼠标移入到某一张图片时，“镁光灯”即聚焦在当前的图片上，这张图片就高亮的展示出来，同时为了更突出所选的这张图片，就把没有被选择到的其它图片添加阴影透明。上图的效果结合相关的描述，大家对此效果的实现有没有一点自己的思路或者方法呢？
2. 实现的原理分析
2.1 结构与样式搭建
为了实现图片的的聚光效果，使用了ul>li来嵌套图片的结构，并且采用的是浮动布局，让多个列表项并排在一起；然后为页面的body增加黑色的背景，以期来增加聚光时的高亮状态；同时为了让鼠标移入时有更好的展示状态，在hover时特地为图片增加一个白色的边框，以区分当前展示的图片区域。
2.2 功能逻辑分析
首先动态的获取了当前每张图片的大小，并设定一个透明度变量；
然后借助JQ的hover()方法，实现鼠标移入移出的图片展示；
最后当用户的鼠标移开了无序列表时，还原当前图片的不透明状态。
3. 案例实现
3.1 获取当前图片大小
借助JQ的find方法找到图片img，获取其宽高大小与设定的透明值一起存放在对象中，以便后期使用的时候可以直接拿取。
之后借助样式设置方法.css()，为列表项的每个列表设置当前图片的大小，使用对象.属性的方式取得前面对象中存储的值。具体代码如下所示：
var spotlight = {
opacity : 0.2,
// 下面是为图像的宽度和高度，可以做相同大小
imgWidth : $('.spotlight ul li').find('img').width(),
imgHeight : $('.spotlight ul li').find('img').height()
};
// 将列表项的宽度和高度设置为与图像相同
$('.spotlight ul li').css({
'width': spotlight.imgWidth,
'height': spotlight.imgHeight
});3.2 实现图片的聚光效果
实现聚光灯效果，主要需要考虑两个方面，一个是鼠标移入时对选中的图片进行高亮展示，同时对其它未选中的设置前面对象中设置好的透明度值；另一方面需要考虑的是当鼠标移开图片时，需要移除高亮显示，并且回归原来的初始状态。
针对如上的说法，特地在CSS样式中封装了一个叫做active的类名，其中主要设置的是鼠标移入后会展示的状态，所以在书写上只需要借助添加或者移除类名即可操作。具体如下所示：
// 当鼠标悬停在列表项上时...
$('.spotlight ul li').hover(function(){
//...找到它里面的图像，并添加活动类，并更改不透明度为1（无透明度）
$(this).find('img').addClass('active').css({
'opacity' : 1
});
// 获取其他列表项，并更改其中的图像的不透明度为我们在Spotlight对象中设置的一个
$(this).siblings('li').find('img').css({
'opacity': spotlight.opacity
}) ;
//当鼠标离开...
}, function(){
// 找到刚刚离开的列表项中的图像，并删除活动类
$(this).find('img').removeClass('active');
});3.3 还原初始状态
还原初始状态主要是发生在鼠标彻底的移开图片区域的时候，这时只需要为最外层的无序列表绑定鼠标移开事件—mouseleave，然后在里面设置所有的图片都不透明度即可，如下操作：
// 当鼠标离开无序列表时...
$('.spotlight ul').on('mouseleave',function(){
// 找到图像并将不透明度更改为1（完全可见）
$(this).find('img').css('opacity', 1);
});3.4 成品代码
<!DOCTYPE htm>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery图片聚光灯</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
body {
background: black;
}
.spotlight {
width: 600px;
margin: 0 auto;
padding-top: 100px;
}
.spotlight ul li {
float: left;
position: relative;
}
.spotlight ul li a img {
position: relative;
width: 200px;
height: 120px;
border: none;
}
.spotlight ul li a img.active {
left: -4px;
top: -4px;
border: 4px solid white;
z-index: 1;
}
</style>
</head>
<body>
<div class='spotlight'>
<ul class="clearfix">
<li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.01.jpg' /></a></li>
<li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.02.jpg' /></a></li>
<li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.03.jpg' /></a></li>
<li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.04.jpg' /></a></li>
<li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.05.jpg' /></a></li>
<li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.06.jpg' /></a></li>
<li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.07.jpg' /></a></li>
<li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.08.jpg' /></a></li>
<li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.09.jpg' /></a></li>
</ul>
</div>
<script type="text/javascript">
var spotlight = {
opacity : 0.2,
// 下面是为图像的宽度和高度，可以做相同大小
imgWidth : $('.spotlight ul li').find('img').width(),
imgHeight : $('.spotlight ul li').find('img').height()
};
// 将列表项的宽度和高度设置为与图像相同
$('.spotlight ul li').css({
'width': spotlight.imgWidth,
'height': spotlight.imgHeight
});
// 当鼠标悬停在列表项上时...
$('.spotlight ul li').hover(function(){
//...找到它里面的图像，并添加活动类，并更改不透明度为1（无透明度）
$(this).find('img').addClass('active').css({
'opacity' : 1
});
// 获取其他列表项，并更改其中的图像的不透明度为我们在Spotlight对象中设置的一个
$(this).siblings('li').find('img').css({
'opacity': spotlight.opacity
}) ;
//当鼠标离开...
}, function(){
// 找到刚刚离开的列表项中的图像，并删除活动类
$(this).find('img').removeClass('active');
});
// 当鼠标离开无序列表时...
$('.spotlight ul').on('mouseleave',function(){
// 找到图像并将不透明度更改为1（完全可见）
$(this).find('img').css('opacity', 1);
});
</script>
</body>
</html>总结
一个简单的聚光灯效果，只是为了用户在查看一些相关的内容时可以获得更好的突出展示效果，这样可以进一步的提升用户的体验性。除此之外，使用JQ的快速开发也为当前的效果层面提升了很大的方便，后期我们仍然还会为大家带来更多具有实战意义的效果，尽请关注哦~~~