jQuery滑鼠懸浮當前圖片高亮其他圖片灰暗效果

antzone發表於2017-04-06
jQuery

在很多具有圖片功能的網頁中都有這樣的功能，那就是滑鼠懸浮於圖片，當前圖片高亮，其他圖片灰暗。

下面就通過程式碼例項介紹一下如何用jQuery實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
a{
  color:white;
}
body{
  background:#000;
}
body, div, ul, li, img{
  padding:0;
  margin:0;
  border:0;
  list-style:none;
}
.hovertreebox{
  width:630px;
  border:1px solid #ccc;
  margin:10px auto;
  overflow:hidden;
  padding:10px 0 0 10px;
}
.hovertreebox li{
  width:200px;
  height:186px;
  float:left;
  margin-right:10px;
  margin-bottom:10px;
  cursor:pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $('.hovertreebox li').mouseover(function(e){
    $(this).siblings().stop().fadeTo(500,0.4);
  });
  $('.hover'+'treebox li').mouseout(function(e){
    $(this).siblings().stop().fadeTo(500,1);
  });
})
</script>
</head>
  
<body>
<div class="hovertreebox" id="hovertreelist">
  <ul>
    <li><img src="img/1.jpg" width="200" height="186" /></li>
    <li><img src="img/2.jpg" width="200" height="186" /></li>
    <li><img src="img/3.jpg" width="200" height="186" /></li>
    <li><img src="img/4.jpg" width="200" height="186" /></li>
    <li><img src="img/5.jpg" width="200" height="186" /></li>
    <li><img src="img/6.jpg" width="200" height="186" /></li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function(){}）,當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$('.hovertreebox li').mouseover(function(e){

  $(this).siblings().stop().fadeTo(500,0.4);

}),為li元素註冊mouseover事件處理函式。

它實現了將當前元素的其他兄弟元素設定透明度為0.4。

（3）.$('.hover'+'treebox li').mouseout(function(e){

  $(this).siblings().stop().fadeTo(500,1);

})，為li元素註冊mouseout事件處理函式，當滑鼠厲害的時候，將當前li元素的其他兄弟元素透明度設定為1。

二.相關閱讀:

（1）.mouseover事件可以參閱jQuery mouseover事件一章節。

（2）.siblings()方法可以參閱siblings()方法一章節。

（3）.stop()方法可以參閱jQuery stop()一章節。

（4）.fadeTo()方法可以參閱jQuery fadeTo()一章節。

（5）.mouseout事件可以參閱jQuery mouseout事件一章節。

相關文章