滑鼠懸浮實現當前圖片高亮效果詳解

admin發表於2017-04-12

在很多圖片型別的網站，或者說涉及到比較多的圖片的網站，會有這樣的效果，那就是當滑鼠懸浮於圖片的時候，當前圖片處於高亮狀態，而其他圖片則比較灰暗，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
a img {
  border: none;
}
#imagesBox{
  width: 165px;
  height: 110px;
  position: relative;
  left: 100px;
  top: 100px;
  z-index: 1;
  border: 1px solid black;
  background-color: white;
}
#trans {
  width: 165px;
  height: 110px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: none;
  opacity: 0.5;
  filter: alpha(opacity=50);
  background-color: black;
}
#imagesBox li {
  width: 55px;
  height: 55px;
  float: left;
  overflow: hidden;
}
#imagesBox li a, #imagesBox li img {
  width: 55px;
  height: 55px;
  display: block;
  cursor: pointer;
}
#imagesBox li img {
  position: relative;
}
</style>
<script type="text/javascript">
function gallery(obj) {
  var tit = obj.getAttribute("alt");
  document.getElementById("trans").style.display = 'block';
  obj.style.zIndex = "3";
}
function clearBg(obj) {
  document.getElementById("trans").style.display = 'none';
  obj.style.zIndex = "1";
}
window.onload = function () {
  var obox = document.getElementById("imagesBox");
  var imgs = obox.getElementsByTagName("img");
  for (var index = 0; index < imgs.length; index++) {
    imgs[index].onmouseover = function () {
      gallery(this);
    }
    imgs[index].onmouseout = function () {
      clearBg(this);
    }
  }
}
</script>
</head>
<body>
<div id="imagesBox">
  <ul>
    <li><a href="#"><img src="demo/js/img/small.jpg"/></a></li>
    <li><a href="#"><img src="demo/js/img/small.jpg"/></a></li>
    <li><a href="#"><img src="demo/js/img/small.jpg"/></a></li>
    <li><a href="#"><img src="demo/js/img/small.jpg"/></a></li>
    <li><a href="#"><img src="demo/js/img/small.jpg"/></a></li>
    <li><a href="#"><img src="demo/js/img/small.jpg"/></a></li>
  </ul>
  <div id="trans"></div>
</div>
</body>
</html>

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

一.實現原理:

程式碼是相對非常簡單的，關鍵是實現的思路。

ul元素裝在的是我們的圖片內容。

trans元素是一個半透明的，通過絕對定位覆蓋於ul元素上的一個遮罩，不過預設狀態下，它是隱藏的。

當滑鼠懸浮於圖片之上的時候，就會設定當前圖片為相對定位，然後調整z-index屬性值，於是圖片就會位於最頂層，隱藏的這招也會顯示，這樣就實現我們的效果了。更多內容可以看下面的相關閱讀。

二.相關閱讀:

（1）.getAttribute()方法可以參閱getAttribute()一章節。

（2）.onmouseover事件可以參閱javascript mouseover事件一章節。

（3）.onmouseout事件可以參閱javascript mouseout事件一章節。

相關文章