html+css3+jq滑动的图片和列表二级分类
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<div class="indexTypes"> 媪青怍牙<ul> <li class="current"> <div class="title"> <h2>产品分类</h2> <a href="">****系列</a> </div> <div class="con fl" id="con11"> <ul> <li><a href="">产品分类名称</a></li> <li><a href="">产品分类名称</a></li> <li><a href="">产品分类名称</a></li> </ul> </div> </li> <li> <div class="title"> <h2>产品分类</h2> <a href="">****系列</a> </div> <div class="con fl" id="con22"> <ul> <li><a href="">产品分类名称</a></li> <li><a href="">产品分类名称</a></li> <li><a href="">产品分类名称</a></li> </ul> </div> </li> <li> <div class="title"> <h2>产品分类</h2> <a href="">*****系列</a> </div> <div class="con fl" id="con33"> <ul> <li><a href="">产品分类名称</a></li> <li><a href="">产品分类名称</a></li> <li><a href="">产品分类名称</a></li> </ul> </div> </li> <div class="clear"></div> </ul></div>
4、初始化css代码。<style>html,body{ font-size:12px; color:#333; font-family:"宋体";}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe,label{ margin:0px; padding:0px; }table{ border-collapse:collapse; border-spacing:0; }fieldset,img,abbr,acronym{ border:none; }ol,ul,li{ list-style:none; }img{ border:0;}acption,th{ text-align:left; }h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; }q:before,qafter{ content:''; }a{ color:#333; text-decoration:none; outline:none; }a:hover{ text-decoration:none; }</style>
5、书写css代码。.indexTypes{width:1002px;margin:10px auto;}.indexTypes ul li{position:relative;float:left;width:193px;overflow:hidden;height:113px;overflow:hidden;}.indexTypes ul li:hover{cursor:pointer;}.indexTypes ul li.currnet{width:510px;}.indexTypes ul li .title{width:143px;padding-top:30px;padding-left:50px;background:url(../images/typeBg.png) repeat-x;font-size:18px;color: #fff;font-family:"微软雅黑";height:83px; float:left;}.indexTypes ul li .title a{color:#fff;}.indexTypes ul li .title h2{font-size:20px;font-weight:bold;padding-bottom:5px;}.indexTypes ul li.current .title{background:url(../images/typeT.jpg) no-repeat left top;}.indexTypes ul li .con{position:absolute;top:0; width:317px; left:193px;background:url(../images/typeUl.jpg) no-repeat left top;overflow:hidden;height:113px;overflow:hidden; }.indexTypes ul li #con11{background:url(../images/typeUl.jpg) no-repeat left top;}.indexTypes ul li #con22{background:url(../images/con22.jpg) no-repeat left top;}.indexTypes ul li #con33{background:url(../images/con33.jpg) no-repeat left top;}.indexTypes ul li .con ul{padding-top:12px;}.indexTypes ul li .con ul li{float:none;height:auto;width:auto;}.indexTypes ul li .con ul li a{line-height:28px;width:195px;display:block;text-indent:3em;background:url(../images/typesLi.jpg) no-repeat 6px 7px;border-bottom:1px dashed #d1d1d1;}.indexTypes ul li .con ul li a:hover{color:#F87C02;}
6、书写并添加js代码。<script src="js/jquery.js"></script><script>$(颊俄岿髭document).ready(function(e) { var currentLi = $(".indexTypes ul li"); $(currentLi.eq(0)).stop().animate({"width":"510px"},600); $(currentLi.eq(0)).children(".con").animate({"left":"193px"},600); $(currentLi).hover(function(e){ $(this).siblings("li").stop().animate({"width":"193px"},600); $(this).siblings("li").removeClass("current"); $(this).addClass("current"); $(this).stop().animate({"width":"510px"},600); }); });</script>
7、代码整体结构。
8、查看效果。
