鼠标悬浮实现当前图片高亮效果详解

快乐打工仔 分类:实例代码

在很多图片类型的网站,或者说涉及到比较多的图片的网站,会有这样的效果,那就是当鼠标悬浮于图片的时候,当前图片处于高亮状态,而其他图片则比较灰暗,下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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事件一章节。

回复

我来回复
  • 暂无回复内容