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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。