仿天猫商城的左边栏导航，还有很多问题，求指教！
 |
wd401169447
2012-11-10
<!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" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <style type="text/css"> .left{ float:left; width:200px; height:720px; background-color:#CCC; } .content{ width:200px; height:80px; margin: 0px; } .main{ float:left; width:0px; height:400px; background-color:#996; overflow:hidden; } .mouseoverBGColor{ background-color:#88766e; } .white{ background-color:white; } .ccc{ background-color:#CCC; } .item1,.item3,.item5,.item7,.item9{ background-color:#ffffff; } .item2,.item4,.item6,.item8{ background-color:#f1f1f1; } .detail{ width:400px; height:400px; background-color:#9C6; display:none; } </style> <title>仿天猫商城左边导航的弹出部分</title> <script type="text/javascript"> $(function(){ var timeObj = null; var color = null; var index = null; $(".content, .main").live({ mouseenter:function(){ //对于导航部分的背景颜色控制 if($(this).hasClass("content")) { color = $(this).css("background-color"); $(this).css({"background-color":"#88766e"}); for(var i = 1 ; i <= $(".content").size() ; i++){ if($(this).hasClass("item"+i)){ index = i; break; } } } //对于内容显示部分的css定义 var Obj = $(".main"); Obj.css({"position":"fixed","top":"0px","left":"208px"}); Obj.find(".detail").not(index-1).css({"display":"none"}); Obj.find(".detail").eq(index-1).css({"display":"block"}); //隐藏内容显示部分的定义 if (timeObj != null) clearTimeout(timeObj); Obj.animate({ width:500 }, 400); return false; }, mouseleave:function(e){ if($(this).hasClass("content")) { $(this).css({"background-color":color}); } timeObj = setTimeout(closeAnimate, 1000); return false; } }); }); function closeAnimate(){ $(".main").animate({ width:0 }, 0); } </script> </head> <body> <div style="width:1000px; height:800px; background-color:#69C; "> <div id="left" class="left"> <div class="content item1"> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>11111111111111111111</div> </div> <div class="content item2"> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>22222222222222222222</div> </div> <div class="content item3"> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>333333333333333333333</div> </div> <div class="content item4"> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>44444444444444444444</div> </div> <div class="content item5"> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>555555555555555555555</div> </div> <div class="content item6"> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>666666666666666666666</div> </div> <div class="content item7"> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>77777777777777777777</div> </div> <div class="content item8"> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>88888888888888888888</div> </div> <div class="content item9"> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>这里是显示的大的分类信息</div> <div>99999999999999999999</div> </div> </div> <div id="main" class="main"> <div class="detail"> <h3>1111111111111111111111</h3> <h3>1111111111111111111111</h3> <h3>1111111111111111111111</h3> <h3>1111111111111111111111</h3> <h3>1111111111111111111111</h3> <h3>1111111111111111111111</h3> <h3>1111111111111111111111</h3> </div> <div class="detail"> <h3>2222222222222222222222</h3> <h3>2222222222222222222222</h3> <h3>2222222222222222222222</h3> <h3>2222222222222222222222</h3> <h3>2222222222222222222222</h3> <h3>2222222222222222222222</h3> <h3>2222222222222222222222</h3> </div> <div class="detail"> <h3>3333333333333333333333</h3> <h3>3333333333333333333333</h3> <h3>3333333333333333333333</h3> <h3>3333333333333333333333</h3> <h3>3333333333333333333333</h3> <h3>3333333333333333333333</h3> <h3>3333333333333333333333</h3> </div> <div class="detail"> <h3>4444444444444444444444</h3> <h3>4444444444444444444444</h3> <h3>4444444444444444444444</h3> <h3>4444444444444444444444</h3> <h3>4444444444444444444444</h3> <h3>4444444444444444444444</h3> </div> <div class="detail"> <h3>5555555555555555555555</h3> <h3>5555555555555555555555</h3> <h3>5555555555555555555555</h3> <h3>5555555555555555555555</h3> <h3>5555555555555555555555</h3> <h3>5555555555555555555555</h3> </div> <div class="detail"> <h3>6666666666666666666666</h3> <h3>6666666666666666666666</h3> <h3>6666666666666666666666</h3> <h3>6666666666666666666666</h3> <h3>6666666666666666666666</h3> <h3>6666666666666666666666</h3> <h3>6666666666666666666666</h3> </div> <div class="detail"> <h3>7777777777777777777777</h3> <h3>7777777777777777777777</h3> <h3>7777777777777777777777</h3> <h3>7777777777777777777777</h3> <h3>7777777777777777777777</h3> <h3>7777777777777777777777</h3> <h3>7777777777777777777777</h3> </div> <div class="detail"> <h3>8888888888888888888888</h3> <h3>8888888888888888888888</h3> <h3>8888888888888888888888</h3> <h3>8888888888888888888888</h3> <h3>8888888888888888888888</h3> <h3>8888888888888888888888</h3> </div> <div class="detail"> <h3>9999999999999999999999</h3> <h3>9999999999999999999999</h3> <h3>9999999999999999999999</h3> <h3>9999999999999999999999</h3> <h3>9999999999999999999999</h3> <h3>9999999999999999999999</h3> </div> </div> </div> </body> </html> |
|
linllh2003
2012-11-30
没有高人。。。。。 |
