滑鼠放在圖片實現高亮效果

admin發表於2017-02-20
很多網站都有這樣的效果，當滑鼠放在圖片上的時候，當前圖片處於高亮狀態，其他圖片則處於遮罩模糊的狀態，下面通過一個例項介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑鼠滑過遮罩高亮效果</title>
<style>
* {
  padding:0;
  margin:0;
}
ul,li {
  list-style:none;
}
.picshow {
  float:left;
  padding:4px 0;
  width:760px;
  position:relative;
}
.picshow li {
  float:left;
  height:160px;
  width:190px;
  opacity:0.9;
}
.picshow li img {
  height:160px;
  width:190px;
}
.picshow li a {
  display:block;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  var conAry = $("[name=h_light]"); 
  conAry.each(function(){ 
    var $this = $(this); 
    var els = $("a", $this); 
    els.each(function(){ 
      var el = $(this); 
      el.mouseover(function(){ 
        els.css({ "opacity": 0.6}); 
        el.animate({ "opacity": 0.9 }); 
      }) 
    })
    $this.mouseout(function(){ 
      els.css("opacity", 1); 
    })
  })
}); 
</script>
</head>
<body>
<ul class="picshow" name="h_light">
  <li><a href="#"><img src="1.jpg" ></a></li>
  <li><a href="#"><img src="1.jpg" ></a></li>
  <li><a href="#"><img src="1.jpg" ></a></li>
  <li><a href="#"><img src="1.jpg" ></a></li>
  <li><a href="#"><img src="1.jpg" ></a></li>
  <li><a href="#"><img src="1.jpg" ></a></li>
  <li><a href="#"><img src="1.jpg" ></a></li>
  <li><a href="#"><img src="1.jpg" ></a></li>
</ul>
</body>
</html>

以上程式碼實現了此功能，只要提供相應圖片即可測試效果。

相關文章