jQuery鼠标响应式灯光效果js代码

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

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

以下是 jQuery鼠标响应式灯光效果js代码的示例演示效果:

当前平台(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>
    <link href="css/zzsc.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <div class="menu">
        <a class="yellow" href="#">Home</a>
        <a class="green" href="#">Blog</a>
        <a class="pink" href="#">Kureshki</a>
        <a class="purple" href="#">Themes</a>
        <a class="blue" href="#">Madenca</a>
        <a class="orange" href="#">Contact</a>
    </div>
    <script src="js/zzsc.js" type="text/javascript"></script>
</body>
</html>

JS代码(zzsc.js):

$(document).ready(function(){
	$('.menu a').hover(function(){
	$(this).stop().animate({
	opacity:1}
,200);
}
,function(){
	$(this).stop().animate({
	opacity:0.3}
,200);
}
);
}
);

CSS代码(zzsc.css):

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);*{margin:0;padding:0;}
body{background:#111;color:#fff;font-family:'Open sans',sans-serif;font-weight:300;font-size:20pt;}
a{color:#fff;text-decoration:none;}
.menu{width:570px;margin:30px auto;}
.menu a{width:180px;line-height:180px;display:block;margin:5px;text-align:center;float:left;opacity:0.3;}
.yellow{background:#fdd22a;}
.blue{background:#009fe3;}
.purple{background:#574696;}
.orange{background:#ee7202;}
.pink{background:#e61c67;}
.green{background:#96c11f;}
.zzsc{text-align:center;clear:both;font-size:4px;}

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