淘宝商城主页鼠标经过整个区域图片变暗变亮的JS特效代码
日期：2014-05-16 浏览次数：20439 次
淘宝商城首页鼠标经过整个区域图片变暗变亮的JS特效代码
淘宝商城首页商品分类模块当鼠标经过整个区域图片变暗，唯一鼠标悬停的那个商品图片变亮的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>&l
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
