HTML5学堂（码匠）：昏暗的场景下，查看任何的图片、效果都会给人不适的感受，因此人们每每喜欢在明亮的场景中来体验世界的美好。 对于前端开发来讲，想要让用户能在更明亮的状态下查看各类图片，那就必须为页面增长上一个“镁光灯”。javascript
本文主要内容css
1. 效果展现html
2. 实现的原理分析前端
3. 案例实现java
1. 效果展现jquery
如上的效果中，能够实现对查看的图片实现聚光效果。当用户的鼠标移入到某一张图片时，“镁光灯”即聚焦在当前的图片上，这张图片就高亮的展现出来，同时为了更突出所选的这张图片，就把没有被选择到的其它图片添加阴影透明。上图的效果结合相关的描述，你们对此效果的实现有没有一点本身的思路或者方法呢？web
2. 实现的原理分析ajax
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的快速开发也为当前的效果层面提高了很大的方便，后期咱们仍然还会为你们带来更多具备实战意义的效果，尽请关注哦~~~
相关文章推荐：
↓↓↓
本文分享自微信公众号 - HTML5 WEB前端分享（h5course-com）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。