仿凡客诚品css

#zs_announcementArea{
	width:700px;
	height:40px;
	line-height:40px;
	margin-left:39px;
	font-size:14px;
	overflow:hidden;
}
#zs_announcementScroll{
	width: 800%;
	float:left;
	display:inline;
}
#zs_announcementScroll1,
#zs_announcementScroll2{
	float:left;
	display:inline;
}
#zs_announcementScroll1 span a:link,
#zs_announcementScroll1 span a:visited,
#zs_announcementScroll1 span a:hover{
    font-weight:bold;
    color:#a10000;
}
#zs_announcementScroll1 a ,
#zs_announcementScroll2 a{
	padding-left:24px;
	background:url(zs_mulImg.gif) no-repeat -237px -15px;
	color:#000;
}
#zs_announceScroll2 a:hover,
#zs_announcementScroll1 a:hover{
	color:#a10000;
}
.zs_hotCategory{
	width:170px;
	height:30px;
	text-align:center;
	line-height:33px;
	font-size:14px;
	color:#fff;
	float:left;
	display:inline;
	_overflow:hidden;
	background:url(zs_mulImg.gif) no-repeat -207px -207px;
}
.zs_hotMore{
	width:570px;
	height:30px;
	text-align:right;
	float:right;
	display:inline;
	_overflow:hidden;
}
.zs_hotMore a{
	width:50px;
	height:100%;
	margin-right:10px;
	float:right;
	display:inline;
	line-height:40px;
	background:url(zs_mulImg.gif) no-repeat -396px -175px;
}
.zs_hcConBox{
	width:740px;
	height:78px;
	overflow:hidden;
}
.zs_hccTitle1,
.zs_hccTitle2,
.zs_hccTitle3,
.zs_hccTitle4
{
	width:74px;
	height:78px;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	color:#333;
	float:left;
	display:inline;
	line-height:80px;
	background-color:#000;
	background:url(zs_mulImg.gif) no-repeat -24px -210px;
}
.zs_hccLink1,
.zs_hccLink2,
.zs_hccLink3,
.zs_hccLink4
{
	width:291px;
	height:78px;
	float:left;
	display:inline;
	line-height:20px;
	padding:20px 0px;
}
.zs_hccLink1 em,
.zs_hccLink2 em,
.zs_hccLink3 em,
.zs_hccLink4 em
{
	font-weight:normal;
	color:#999;
}
.zs_hccBorder{
	width:100%;
	float:left;
	display:inline;
	border:1px solid #ccc;
}
.zs_clearFloat{
	clear:both;
}

  <div class="zs_announcementArea">
    <div id="zs_announcementArea">
      <div id="zs_announcementScroll">
       <div id="zs_announcementScroll1"><a href="">鸿运当头</a><a href="">金猪送福</a><a href="">赤壁</a><a href="花山">花山</a><a href="">红火</a></div>

       <div id="zs_announcementScroll2"></div>
      </div>
    </div>
   </div>
   
   <div class="zs_hcc">
     <div class="zs_hotCategory">热门分类</div>
     <div class="zs_hotMore"><a href="">更多1</a><a href="">更多2</a></div>

   </div>
   <div class="zs_hccBorder">
    <div class="zs_hcConBox">
     <div class="zs_hccTitle1">推荐</div>
     <div class="zs_hccLink1">
        
       <a href="">热点1</a><em>|</em>
       <a href="">热点2</a><em>|</em>

       <a href="">热点3</a><em>|</em>
       <a href="">热点4</a><em>|</em>
       <a href="">热点5</a><em>|</em>
       <a href="">热点6</a><em>|</em>
       <a href="">热点7</a><em>|</em>

       <a href="">热点8</a><em>|</em>
     </div>
     <div class="zs_hccTitle2">新品</div>
     <div class="zs_hccLink2">
       <a href="">新品1</a><em>|</em>
       <a href="">新品2</a><em>|</em>

       <a href="">新品3</a><em>|</em>
       <a href="">新品4</a><em>|</em>
       <a href="">新品5</a><em>|</em>
       <a href="">新品6</a><em>|</em>
       <a href="">新品7</a><em>|</em>

       <a href="">新品8</a><em>|</em>
     </div>
    </div>
    <div class="zs_hcConBox">
     <div class="zs_hccTitle3">推荐</div>
     <div class="zs_hccLink3">
       <a href="">热点1</a><em>|</em>

       <a href="">热点2</a><em>|</em>
       <a href="">热点3</a><em>|</em>
       <a href="">热点4</a><em>|</em>
       <a href="">热点5</a><em>|</em>
       <a href="">热点6</a><em>|</em>

       <a href="">热点7</a><em>|</em>
       <a href="">热点8</a><em>|</em>
     </div>
     <div class="zs_hccTitle4">新品</div>
     <div class="zs_hccLink4">
       <a href="">新品1</a><em>|</em>

       <a href="">新品2</a><em>|</em>
       <a href="">新品3</a><em>|</em>
       <a href="">新品4</a><em>|</em>
       <a href="">新品5</a><em>|</em>
       <a href="">新品6</a><em>|</em>

       <a href="">新品7</a><em>|</em>
       <a href="">新品8</a><em>|</em>
     </div>
    </div>
   </div>

 $(".zs_subNav div").hide();
if(/jobs=show$/.test(location.href)){$(".zs_subNav div").show();} //齐博cms，双击进后台，为了显示标签
var nav=$(".zs_navTitle li").get();//new Array("首页","导航二","导航三","导航四","导航五","导航六","导航七","淘宝店","论坛")
$(".zs_navTitle li").mouseenter(function(event)
{
  var j=1;
  for(var i=0;i<nav.length;i++)
  {
    if(($(this).text()).replace(/\s/,"")==($(nav[i]).text()).replace(/\s/,""))
    {
      $(".zs_navTitle li").css("background-color","");
      $(".zs_navTitle li:contains('"+($(nav[i]).text()).replace(/\s/,"")+"')").css("background-color","#fff");
      $(".zs_subNav div:not(.zs_subNav"+j+")").hide();
      $(".zs_subNav"+j).show();
      $(".zs_navTitle a").css({"color":"#fff"});
      $(".zs_navTitle li a:contains('"+($(nav[i]).text()).replace(/\s/,"")+"')").css("color","red");
    }
    j++;
																  
  }	  
});

 // 公告announcement
                        
var speed = 30; //数字越大速度越慢
var aArea = document.getElementById("zs_announcementArea");
var aScroll1 = document.getElementById("zs_announcementScroll1");
var aScroll2 = document.getElementById("zs_announcementScroll2");
aScroll2.innerHTML = aScroll1.innerHTML;
function zs_marquee()
{
  if (aScroll1.offsetWidth - aArea.scrollLeft == 0)
      aArea.scrollLeft=0;
  else
      aArea.scrollLeft++;
}
var zs_mar = setInterval(zs_marquee, speed);
aArea.onmouseover = function () { clearInterval(zs_mar) };
aArea.onmouseout = function () { zs_mar = setInterval(zs_marquee, speed) };

                            
//  内容 变换图片特效
$(".zs_hcConBox div").hover(
function(event)
{
   for(i=1;i<5;i++)
   {
     var zsTitle="zs_hccTitle"+i;
     var zsLink="zs_hccLink"+i;
     var title=".zs_hccTitle"+i;
     if($(this).hasClass(zsTitle)||$(this).hasClass(zsLink))
     {
        $(title).css({"background-position":"-115px -211px","color":"#fff"});
        break;
     }
   }
},
function(event)
{
  for(i=1;i<5;i++)
  {
    var zsTitle="zs_hccTitle"+i;
    var zsLink="zs_hccLink"+i;
    var title=".zs_hccTitle"+i;
    if($(this).hasClass(zsTitle)||$(this).hasClass(zsLink))
    {
      $(title).css({"background-position":"-24px -211px","color":"#333"});
      break;
    }
  }
});