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事件一章节。

回复

我来回复
  • 暂无回复内容