jQuery实现鼠标经过图片变亮效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery实现鼠标经过图片变亮效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现鼠标经过图片变亮效果</title>
<style type="text/css">
body{background:#000;}
body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}
.all{width:630px; border:1px solid #ccc; margin:100px auto; overflow:hidden; padding:10px 0 0 10px;}
li{width:200px; height:186px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}

</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$('li').mouseover(function(e) {
        $(this).siblings().stop().fadeTo(500,0.4);
    });
	$('li').mouseout(function(e) {
        $(this).siblings().stop().fadeTo(500,1);
    });
})
</script>
</head>

<body>
<div class="all" id="box">
	<ul>
		<li><img src="images/01.jpg" width="200" height="186" /></li>
		<li><img src="images/02.jpg" width="200" height="186" /></li>
		<li><img src="images/03.jpg" width="200" height="186" /></li>
		<li><img src="images/04.jpg" width="200" height="186" /></li>
		<li><img src="images/05.jpg" width="200" height="186" /></li>
		<li><img src="images/06.jpg" width="200" height="186" /></li>
	</ul>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)