jQuery鼠标悬浮当前图片高亮其他图片灰暗效果
分类:实例代码
在很多具有图片功能的网页中都有这样的功能,那就是鼠标悬浮于图片,当前图片高亮,其他图片灰暗。
下面就通过代码实例介绍一下如何用jQuery实现此功能。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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="/wp-content/uploads/front-end-tutorial/error.html" 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事件一章节。