以下是 jquery天猫分类导航banner切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>jquery天猫分类导航banner切换</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
</script>
<style>
</style>
</head>
<body>
<!-- 顶部 start-->
<div class="yHeader">
<!-- 导航 start -->
<div class="yNavIndex">
<div class="pullDown">
<h2 class="pullDownTitle">
所有商品分类
</h2>
<ul class="pullDownList">
<li class="menulihover">
<i class="listi1"></i>
<a href="" target="_blank">手机</a>
/<a href="" target="_blank">数码</a>
/<a href="" target="_blank">电脑办公</a>
<span></span>
</li>
<li>
<i class="listi2"></i>
<a href="" target="_blank">女装</a>
/<a href="" target="_blank">内衣</a>
<span></span>
</li>
<li>
<i class="listi3"></i>
<a href="" target="_blank">男装</a>
/<a href="" target="_blank">运动户外</a>
<span></span>
</li>
<li>
<i class="listi4"></i>
<a href="" target="_blank">女鞋</a>
/<a href="" target="_blank">男鞋</a>
/<a href="" target="_blank">箱包</a>
<span></span>
</li>
<li>
<i class="listi5"></i>
<a href="" target="_blank">化妆品</a>
/<a href="" target="_blank">个人护理</a>
<span></span>
</li>
<li>
<i class="listi6"></i>
<a href="" target="_blank">母婴玩具</a>
<span></span>
</li>
<li>
<i class="listi7"></i>
<a href="" target="_blank">零食</a>
/<a href="" target="_blank">进口食品</a>
/<a href="" target="_blank">酒</a>
<span></span>
</li>
<li>
<i class="listi8"></i>
<a href="" target="_blank">大家电</a>
/<a href="" target="_blank">生活电器</a>
<span></span>
</li>
<li>
<i class="listi9"></i>
<a href="" target="_blank">家具建材</a>
<span></span>
</li>
<li>
<i class="listi10"></i>
<a href="" target="_blank">珠宝饰品</a>
/<a href="" target="_blank">腕表眼镜</a>
<span></span>
</li>
<li>
<i class="listi11"></i>
<a href="" target="_blank">汽车</a>
/<a href="" target="_blank">配件</a>
/<a href="" target="_blank">用品</a>
<span></span>
</li>
<li>
<i class="listi12"></i>
<a href="" target="_blank">家纺</a>
/<a href="" target="_blank">家饰</a>
/<a href="" target="_blank">鲜花</a>
<span></span>
</li>
<li>
<i class="listi13"></i>
<a href="" target="_blank">医药保健</a>
<span></span>
</li>
<li>
<i class="listi14"></i>
<a href="" target="_blank">厨具</a>
/<a href="" target="_blank">收纳</a>
/<a href="" target="_blank">宠物</a>
<span></span>
</li>
<li>
<i class="listi15"></i>
<a href="" target="_blank">图书音像</a>
<span></span>
</li>
</ul>
<!-- 下拉详细列表具体分类 -->
<div class="yMenuListCon">
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
<div class="yMenuListConin">
<div class="yMenuLCinList">
<h3><a href="" class="yListName">精品男装</a><a href="" class="yListMore">更多 ></a></h3>
<p>
<a href="" class="ecolor610">大牌上新</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
<a href="">商场同款</a>
<a href="">男装集结</a>
<a href="">羽绒服</a>
<a href="">加厚羽绒 </a>
<a href="">高帮鞋</a>
</p>
</div>
</div>
</div>
</div>
<ul class="yMenuIndex">
<li><a href="" target="_blank" class="yMenua">首页</a></li>
<li><a href="" target="_blank">电器城 <span></span></a></li>
<li><a href="" target="_blank">电器城</a></li>
<li><a href="" target="_blank">电器城</a></li>
<li><a href="" target="_blank">电器城</a></li>
<li><a href="" target="_blank">电器城</a></li>
<li><a href="" target="_blank">电器城</a></li>
</ul>
</div>
<!-- 导航 end -->
</div>
<!-- 顶部 end-->
<!-- banner start -->
<div class="yBanner">
<div class="yBannerList">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner" style="opacity:1;">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
<div class="yBannerList ybannerHide">
<div class="yBannerListIn">
<a href="">
<img class="ymainBanner" src="images/banner1.jpg">
<span class="ytextBanner">
</span>
</a>
<div class="yBannerListInRight">
<a href="">
<img src="images/BR2.png"/>
</a>
<b class="yimaginaryLine"></b>
<a href="">
<img src="images/BR2.png"/>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(index.js):
$(function(){
// 导航左侧栏js效果 start$(".pullDownList li").hover(function(){
$(".yMenuListCon").fadeIn();
var index=$(this).index(".pullDownList li");
if (!($(this).hasClass("menulihover")||$(this).hasClass("menuliselected"))){
$($(".yBannerList")[index]).css("display","block").siblings().css("display","none");
$($(".yBannerList")[index]).removeClass("ybannerExposure");
setTimeout(function(){
$($(".yBannerList")[index]).addClass("ybannerExposure");
}
,60)}
else{
}
$(this).addClass("menulihover").siblings().removeClass("menulihover");
$(this).addClass("menuliselected").siblings().removeClass("menuliselected");
$($(".yMenuListConin")[index]).fadeIn().siblings().fadeOut();
}
,function(){
}
)$(".pullDown").mouseleave(function(){
$(".yMenuListCon").fadeOut();
$(".yMenuListConin").fadeOut();
$(".pullDownList li").removeClass("menulihover");
}
)// 导航左侧栏js效果 end}
)CSS代码(comm.css):
@charset "utf-8";body,p,h1,h2,h3,h4,h5,h6,form,input,ul,li,dd,dl,textarea{padding:0;margin:0;list-style-type:none;}
a{text-decoration:none;}
img{border:0;}
CSS代码(index.css):
@charset "utf-8";@import url(comm.css);body{font-family:microsoft Yahei;min-width:1200px;background:#f5f5f5;_width:expression(document.documentElement.clientWidth>1200?document.documentElement.clientWidth:1200);}
em,i{font-style:normal;}
/*顶部 start*/
.yHeader{width:100%;}
/*导航 start*/
.yNavIndex{width:1200px;margin:18px auto 0;height:35px;/*border-bottom:2px solid #2d2d2d;*/
position:relative;}
.yNavIndex .yMenuIndex{margin-left:190px;}
.yNavIndex .yMenuIndex li a{position:relative;display:inline-block;font-size:16px;color:#333;line-height:32px;height:32px;padding:0 21px;}
.yNavIndex .yMenuIndex li a.yMenua{font-weight:bold;border-bottom:3px solid #2d2d2d;}
.yNavIndex .yMenuIndex li a:hover{font-weight:bold;border-bottom:3px solid #2d2d2d;}
.yNavIndex .yMenuIndex li{float:left;height:33px;padding:0 12px;}
/*下拉*/
.pullDown{z-index:1;position:absolute;}
.pullDownTitle{height:35px;width:190px;background:#a90000;color:#ffffff;font-size:16px;font-weight:normal;text-align:center;line-height:35px;}
.pullDownList{width:190px;height:480px;background:url(../images/pullbj.jpg);position:relative;z-index:2;}
.pullDownList li{height:32px;color:#fefcfc;font-size:13px;padding-left:11px;position:relative;}
.pullDownList li i{display:inline-block;position:relative;top:4px;margin-right:8px;left:0;-webkit-transition:margin-left .2s linear;-moz-transition:margin-left .2s linear;-o-transition:margin-left .2s linear;width:20px;height:19px;background:url(../images/indexicon1.png) no-repeat;}
.pullDownList li.menulihover i{margin-left:6px;}
/*以下代码是使用图片精灵需要图片的定位信息*/
/*.pullDownList li i.listi1{background-position:0 -1240px}
.pullDownList li i.listi2{background-position:0 -1271px}
.pullDownList li i.listi3{background-position:0 -1302px}
.pullDownList li i.listi4{background-position:0 -1332px}
.pullDownList li i.listi5{background-position:0 -1362px}
.pullDownList li i.listi6{background-position:0 -1395px}
.pullDownList li i.listi7{background-position:0 -1425px}
.pullDownList li i.listi8{background-position:0 -1457px}
.pullDownList li i.listi9{background-position:0 -1489px}
.pullDownList li i.listi10{background-position:0 -1519px}
.pullDownList li i.listi11{background-position:0 -1552px}
.pullDownList li i.listi12{background-position:0 -1582px}
.pullDownList li i.listi13{background-position:0 -1612px}
.pullDownList li i.listi14{background-position:0 -1644px}
.pullDownList li i.listi15{background-position:0 -1674px}
*/
.pullDownList li a{color:#fefcfc;font-size:13px;}
.pullDownList li.menuliselected{background:#4a4a4a;}
.pullDownList li.menuliselected span{top:14px;right:7px;border-left:4px solid transparent;border-top:4px solid #fff;border-right:4px solid transparent;border-bottom:0;}
.pullDownList li.menulihover{background:#a90000;}
.pullDownList li span{display:inline-block;width:0;height:0;position:absolute;top:12px;right:8px;}
.pullDownList li.menulihover span{top:12px;right:8px;border-left:4px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:0;}
/*下拉详细列表具体分类*/
.yMenuListCon{width:400px;height:480px;position:absolute;z-index:2;top:35px;left:190px;overflow:hidden;}
.yMenuListCon p{width:auto;color:#7f7e7e;font-size:12px;margin:10px 0 0 -1px;overflow:hidden;}
.yMenuListCon p a{color:#7f7e7e;font-size:12px;padding:0 8px;display:inline-block;float:left;margin-top:5px;background:url(../images/indexicon1.png) 0 -1695px;}
.yMenuListCon p a.ecolor610{color:#a90000;}
.yMenuListCon p a:hover{color:#a90000;text-decoration:underline;}
.yMenuListConin{display:none;background:#fff;opacity:0.9;-moz-opacity:0.9;filter:alpha(opacity=90);padding:0 20px;width:360px;height:480px;position:absolute;left:0;top:0;}
.yMenuLCinList{overflow:hidden;}
/*详细分类标题*/
.yMenuLCinList h3{position:relative;height:20px;width:auto;margin:25px auto 0;border-bottom:1px solid #000;}
.yMenuLCinList h3 a{font-size:12px;color:#2d2d2d;position:absolute;bottom:0px;display:block;}
.yMenuLCinList h3 .yListMore{color:#666666;font-weight:normal;right:0;with:40px;height:20px;}
.yMenuLCinList h3 .yListName{-webkit-transition:left .2s linear;-moz-transition:left .2s linear;-o-transition:left .2s linear;display:block;width:90px;height:20px;line-height:20px;padding-top:17px;padding-left:30px;left:0;background:url(../images/yListNameicon.png) no-repeat 0 5px;}
.yMenuLCinList h3 .yListName:hover{left:6px;}
/*导航 end*/
/*顶部 end*/
/*banner start*/
.yBanner{height:480px;width:100%;overflow:hidden;position:relative;}
.yBannerList{height:480px;width:100%;background:#d32830;position:absolute;top:0;left:0;}
.ybannerHide{display:none;}
.ymainBanner{-webkit-transform:scaleX(1.05) scaleY(1.05);-moz-transform:scaleX(1.05) scaleY(1.05);-ms-transform:scaleX(1.05) scaleY(1.05);-o-transform:scaleX(1.05) scaleY(1.05);transform:scaleX(1.05) scaleY(1.05);}
.ybannerExposure .ymainBanner{-webkit-transition:-webkit-transform 4s linear;-moz-transition:-moz-transform 4s linear;-o-transition:-o-transform 4s linear;transition:transform 4s linear;-webkit-transform:scaleX(1) scaleY(1);-moz-transform:scaleX(1) scaleY(1);-ms-transform:scaleX(1) scaleY(1);-o-transform:scaleX(1) scaleY(1);transform:scaleX(1) scaleY(1);}
.yBannerListIn{overflow:hidden;width:1010px;padding-left:190px;height:480px;margin:0 auto;position:relative;}
.ytextBanner{opacity:0;position:absolute;right:190px;top:0;width:405px;height:480px;z-index:1;background:url(../images/banner1in.png) no-repeat center center;}
.ybannerExposure .ytextBanner{-webkit-transition:opacity 2s linear;-moz-transition:opacity 2s linear;-o-transition:opacity 2s linear;transition:opacity 2s linear;opacity:1;}
.yBannerListIn .yBannerListInRight{position:absolute;top:0;right:0;width:190px;height:480px;z-index:5;opacity:0.95;filter:alpha(opacity=95);}
.yBannerListInRight .yimaginaryLine{display:block;height:0;border-top:1px dotted #eee;}
.yBannerListInRight img{vertical-align:top;-webkit-transition:-webkit-transform .2s linear;-moz-transition:-moz-transform .2s linear;-o-transition:-o-transform .2s linear;transition:transform .2s linear;}
.yBannerListInRight img:hover{-webkit-transform:translateX(-5px);-moz-transform:translateX(-5px);-ms-transform:translateX(-5px);-o-transform:translateX(-5px);transform:translateX(-5px);}
/*banner end*/
分享到QQ
分享到微博
微信扫一扫
