鼠标悬浮实现当前图片高亮效果详解
分类:实例代码
在很多图片类型的网站,或者说涉及到比较多的图片的网站,会有这样的效果,那就是当鼠标悬浮于图片的时候,当前图片处于高亮状态,而其他图片则比较灰暗,下面就通过代码实例介绍一下如何实现此功能。
代码实例如下:
<!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事件一章节。