淘宝商城首页鼠标经过整个区域图片变暗变亮的JS特效代码

来源：互联网发布：全国网络统考成绩查询编辑：程序博客网时间：2024/04/30 09:18
淘宝商城首页商品分类模块当鼠标经过整个区域图片变暗，唯一鼠标悬停的那个商品图片变亮的JS特效代码！
在线演示：http://mj.588cy.com/jquery/22.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>无标题文档</title><style>* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}a{ text-decoration:none;}.top{ width:800px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}.logo a{ color:#666666;}.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}.denglu a{ color:#666666; margin:0px 10px;}.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}.box{ width:780px; height:auto; margin:0px auto; border-top:1px solid #f9f9f9; padding:30px 10px;}.nav{background:url(http://img03.taobaocdn.com/tps/i3/T1vEjBXaFXXXXB18My-190-292.png) repeat left top;width:190px;height:300px; float:left;}.nav li {float:left;position:relative;width:95px;height:30px;}.nav li a {position:absolute;text-indent:-9999px;display:block;width:95px;height:30px;top:0;left:0;overflow:hidden;outline:none;}.nav li a:hover { background:#000;opacity:0.1;filter:alpha(opacity=10);}.floorMain {float:left; width:460px; position:relative;}.floorMain a{background-color:#000; position:absolute;}.a_a{ left:0px; top:0px;}.a_b{ left:195px; top:0px;}.a_c{ left:195px; top:150px;}.a_d{ left:390px; top:0px;}</style><script type="text/javascript" src="http://mj.588cy.com/img/jquery-1.2.6.min.js"></script><script>$(document).ready(function(){$(".floorMain a").each(function() {$(this).hover(function() {$(this).siblings().find("img").stop().fadeTo("fast",0.7);},function() {$(this).siblings().find("img").stop().fadeTo("fast",1);});});})</script></head><body><div class="top"><div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div><div class="denglu"><a href="#">登录</a><a href="#">注册</a></div><div class="clear"></div></div><div class="box"><div class="nav"><ul><li><a  href="#" title="fiveplus">fiveplus</a></li><li><a  href="#" title="LEVIS/李维斯">LEVIS/李维斯</a></li><li><a  href="#" title="ochirly">ochirly</a></li><li><a  href="#" title="JACKJONES/杰克琼斯">JACKJONES/杰克琼斯</a></li><li><a  href="#" title="雅莹">雅莹</a></li><li><a  href="#" title="KBOXING/劲霸">KBOXING/劲霸</a></li><li><a  href="#" title="恩裳">恩裳</a></li><li><a  href="#" title="SEPTWOLVES/七匹狼">SEPTWOLVES/七匹狼</a></li><li><a  href="#" title="ONLY">ONLY</a></li><li><a  href="#" title="FAIRWHALE/马克华菲">FAIRWHALE/马克华菲</a></li><li><a  href="#" title="veromoda">veromoda</a></li><li><a  href="#" title="CABBEEN/卡宾">CABBEEN/卡宾</a></li><li><a  href="#" title="哥弟">哥弟</a></li><li><a  href="#" title="艾格">艾格</a></li><li><a  href="#" title="爱慕">爱慕</a></li><li><a  href="#" title="金三塔">金三塔</a></li><li><a  href="#" title="曼妮芬">曼妮芬</a></li><li><a  href="#" title="华歌尔">华歌尔</a></li></ul></div><div class="floorMain"><a href="http://www.chaonanwo.com/book/yifu" class="a_a"><img src="http://img01.taobaocdn.com/tps/i1/T1zzrIXghhXXXoDBZK-195-300.png" /></a><a href="http://www.chaonanwo.com/note/229/g/199" class="a_b"><img src="http://img02.taobaocdn.com/tps/i2/T1qazzXe4nXXc2tkZK-195-150.png" /></a><a href="http://www.chaonanwo.com/book/xiezi" class="a_c"><img src="http://img02.taobaocdn.com/tps/i2/T1pevFXbFoXXc2tkZK-195-150.png" /></a>        <a href="http://www.chaonanwo.com/book/yifu" class="a_d"><img src="http://img01.taobaocdn.com/tps/i1/T11YWoXdhSXXXXXXXX-195-300.jpg" /></a></div></div></body></html>