Jquery 淘宝商城鼠标经过整个区域图片变暗变亮的JS代码 -

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

作者：MJ 发布于：2012-9-4 10:17 Tuesday 分类：JQuery

用Jquery写的仿淘宝商城首页鼠标经过整个区域图片变暗，唯有鼠标指到的那个图片变亮的JS代码

<!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 type="text/javascript">
$(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>

标签: 淘宝JS

« IE6下面 position:absolute 失效导致绝对定位层不显示的原因 | WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。»

发表评论：

blogger
分类
- MJ分享(5)
- JQuery(23)
- Css(16)
- Html5(1)
- PHP(20)
- Seo优化(3)
最新碎语
- 佛曰：命由己造，相由心生，世间万物皆是化相，心不动，万物皆不动，心不变，万物皆不变。
  2012-10-24 02:01
- 佛曰：人生有八苦：生、老、病、死，爱别离，怨长久，求不得，放不下！
  2012-10-24 01:59
- 佛曰：笑着面对，不去埋怨。悠然，随心，随性，随缘。注定让一生改变的，只在百年后，那一朵花开的时间。
  2012-10-24 01:56
- 裤子尺码：腰围29（2.23尺/75-76cm）前档24-25cm 大腿48-50cm 小腿32-33cm 裤长95cm
  2012-10-17 15:49
- WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。
  2012-09-02 15:34
搜索
随机日志
链接

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

blogger

分类

最新碎语

搜索

随机日志

链接