可复用的js效果
以下案例的html以及css代码
<!doctype html> <html lang="zh-hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="lib/bootstrap/css/animate.min.css"> <link rel="stylesheet" href="styles/reset.css"> <link rel="stylesheet" href="styles/home.css"> <link rel="stylesheet" id="skin-css" href="styles/skin/skin-normal.css"> <title>购物网首页</title> </head> <body> <header> <div class="container"> <div class="header-top"> <div class="logo-wrapper"> <img src="images/logo.gif" class="logo" alt="img"/> </div> <input type="text" id="input-search" class="search" name="search" defaultValue="请输入商品名称"/> <ul class="skin"> <li class="skin-blue"></li> <li class="skin-green"></li> <li class="skin-orange"></li> <li class="skin-tianlan"></li> <li class="skin-red"></li> <li class="skin-pure"></li> </ul> </div> <nav> <ul class="nav-bar"> <li><a href="#">首页</a></li> <li> <a href="#">品牌</a> <div class="subitem"> <dl class="fore"> <dt> <a href="#nogo">品牌：</a> </dt> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd ><a href="#nogo">安踏</a></dd> <dd ><a href="#nogo">奥康</a></dd> <dd ><a href="#nogo">骆驼</a></dd> <dd ><a href="#nogo">特步</a></dd> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd class="noborder"><a href="#nogo">特步</a></dd> </dl> <dl> <dt> <a href="#nogo">品牌：</a> </dt> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd ><a href="#nogo">安踏</a></dd> <dd ><a href="#nogo">奥康</a></dd> <dd ><a href="#nogo" >骆驼</a></dd> <dd ><a href="#nogo">特步</a></dd> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo" >阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd class="noborder"><a href="#nogo">特步</a></dd> </dl> </div> </li> <li> <a href="#">女装</a> <div class="subitem" > <dl class="fore"> <dt> <a href="#nogo">女装：</a> </dt> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd ><a href="#nogo">安踏</a></dd> <dd ><a href="#nogo">奥康</a></dd> <dd ><a href="#nogo">骆驼</a></dd> <dd ><a href="#nogo">特步</a></dd> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd class="noborder"><a href="#nogo">特步</a></dd> </dl> <dl> <dt> <a href="#nogo">女装：</a> </dt> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd ><a href="#nogo">安踏</a></dd> <dd ><a href="#nogo">奥康</a></dd> <dd ><a href="#nogo">骆驼</a></dd> <dd ><a href="#nogo">特步</a></dd> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd class="noborder"><a href="#nogo">特步</a></dd> </dl> </div> </li> <li> <a href="#">男装</a> <div class="subitem" > <dl class="fore" > <dt> <a href="#nogo">男装：</a> </dt> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd ><a href="#nogo">安踏</a></dd> <dd ><a href="#nogo">奥康</a></dd> <dd ><a href="#nogo" class="promoted">骆驼</a></dd> <dd ><a href="#nogo">特步</a></dd> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo" class="promoted">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd class="noborder"><a href="#nogo">特步</a></dd> </dl> <dl> <dt> <a href="#nogo">男装：</a> </dt> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd ><a href="#nogo">安踏</a></dd> <dd ><a href="#nogo">奥康</a></dd> <dd ><a href="#nogo">骆驼</a></dd> <dd ><a href="#nogo">特步</a></dd> <dd ><a href="#nogo">耐克</a></dd> <dd ><a href="#nogo">阿迪达斯</a></dd> <dd ><a href="#nogo">达芙妮</a></dd> <dd ><a href="#nogo">李宁</a></dd> <dd class="noborder"><a href="#nogo">特步</a></dd> </dl> </div> </li> <li><a href="#">鞋包配饰</a></li> </ul> </nav> </div> </header> <div class="main-body container"> <aside> <h3 class="aside-banner"> 商品分类 </h3> <div class="aside-content"> <h4> 推荐品牌 </h4> <ul class="aside-ul clear"> <li><a href="#nogo" >耐克</a></li> <li><a href="#nogo" class="promoted">阿迪达斯</a></li> <li class="promoted"> <a href="#nogo" >达芙妮</a></li> <li><a href="#nogo" >李宁</a></li> <li><a href="#nogo" >安踏</a></li> <li><a href="#nogo" >奥康</a></li> <li><a href="#nogo" class="promoted">骆驼</a></li> <li><a href="#nogo" >特步</a></li> </ul> <h4> 女装 </h4> <ul class="aside-ul clear"> <li><a href="#nogo" >呢大衣</a></li> <li><a href="#nogo" >T恤</a></li> <li><a href="#nogo" >羽绒</a></li> <li><a href="#nogo" >衬衫</a></li> <li><a href="#nogo" >羊绒衫</a></li> <li><a href="#nogo" >针织</a></li> <li><a href="#nogo" >连衣裙</a></li> <li><a href="#nogo" >皮外套</a></li> </ul> <h4>男装</h4> <ul class="aside-ul clear"> <li><a href="#nogo" >衬衫</a></li> <li><a href="#nogo" >T恤衫</a></li> <li><a href="#nogo" >夹克</a></li> <li><a href="#nogo" >大皮衣</a></li> <li><a href="#nogo" >风衣</a></li> <li><a href="#nogo" >牛仔裤</a></li> <li><a href="#nogo" >西服</a></li> <li><a href="#nogo" >卫衣</a></li> </ul> <h4>鞋包配饰</h4> <ul class="aside-ul clear"> <li><a href="#nogo" >围巾</a></li> <li><a href="#nogo" >旅行箱</a></li> <li><a href="#nogo" >真皮包</a></li> <li><a href="#nogo" >韩版</a></li> <li><a href="#nogo" >达芙妮</a></li> <li><a href="#nogo" >单肩包</a></li> <li><a href="#nogo" >毛线</a></li> <li><a href="#nogo" >清仓靴子</a></li> </ul> </div> </aside> <div class="content"> <!--大幅广告栏--> <div> <div class="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="images/ads/1.jpg" alt="相约情人节"/></a> </div> <div class="item"> <a href="#"><img src="images/ads/2.jpg" alt="新款上线"/></a> </div> <div class="item"> <a href="#"><img src="images/ads/3.jpg" alt="愤怒小鸟特卖"/></a> </div> <div class="item"> <a href="#"><img src="images/ads/4.jpg" alt="男鞋促销第一波"/></a> </div> <div class="item"> <a href="#"><img src="images/ads/5.jpg" alt="春季新品发布"/></a> </div> </div> <div class="carousel-control"> <a href="###1"><em>相约情人节</em><em>全场119元起</em></a> <a href="###2"><em>新款上线</em><em>全场357元起</em></a> <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a> <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a> <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a> </div> </div><!--大幅广告栏 end--> <div class="ads"> <div class="ads-photo"> <a href="#"><img src="images/upload/20120216.jpg"/></a> </div> <div class="ads-activity"> <h4>最新动态</h4> <ul> <li><a href="#"><span>活动</span>伊伴春鞋迎春大促</a></li> <li><a href="#"><span>活动</span>千百度冬靴新品火热让利</a></li> <li><a href="#"><span>活动</span> 千百度冬靴新品火热让利</a></li> <li><a href="#"><span>活动</span>伊伴春鞋迎春大促</a></li> <li><a href="#"><span>活动</span>千百度冬靴新品火热让利</a></li> </ul> </div> </div><!--广告栏右侧--> </div> <div class="brand-activity"> <div class="brand-title"> <h4>品牌活动</h4> <ul class="category"> <li><a href="#">运动</a></li> <li><a href="#">女鞋</a></li> <li><a href="#">男鞋</a></li> <li><a href="#">童鞋</a></li> </ul> </div> <div class="brand-content"> <ul class="brand-gallery"> <li> <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a> <span><a href="###1">耐克</a></span> </li> <li> <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a> <span><a href="###2">阿迪达斯</a></span> </li> <li> <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a> <span><a href="###3">李宁</a></span> </li> <li> <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a> <span><a href="###4">安踏</a></span> </li> <li> <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a> <span><a href="###1">耐克</a></span> </li> <li> <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a> <span><a href="###2">阿迪达斯</a></span> </li> <li> <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a> <span><a href="###3">李宁</a></span> </li> <li> <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a> <span><a href="###4">安踏</a></span> </li> <li> <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a> <span><a href="###1">耐克</a></span> </li> <li> <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a> <span><a href="###2">阿迪达斯</a></span> </li> <li> <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a> <span><a href="###3">李宁</a></span> </li> <li> <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a> <span><a href="###4">安踏</a></span> </li> <li> <a href="###1" class="JS_live"><img alt="耐克" src="images/upload/20120217.jpg" /></a> <span><a href="###1">耐克</a></span> </li> <li> <a href="###2" class="JS_live"><img alt="阿迪达斯" src="images/upload/20120218.jpg" /></a> <span><a href="###2">阿迪达斯</a></span> </li> <li> <a href="###3" class="JS_live"><img alt="李宁" src="images/upload/20120219.png" /></a> <span><a href="###3">李宁</a></span> </li> <li> <a href="###4" class="JS_live"><img alt="安踏" src="images/upload/20120220.png" /></a> <span><a href="###4">安踏</a></span> </li> </ul> </div> </div> </div> <!--右侧内容--> </div> <script src="scripts/jquery-2.1.4.min.js"></script> <script src="scripts/jquery.cookie.js"></script> <script src="scripts/home.js"></script> </body>
header{ width:100%; background: url("../images/headerbg.png") repeat-x scroll 0 0 #FFFFFF; height:105px; } header .header-top{ height:68px; line-height:68px; } header .logo-wrapper{ float:left; } header .search{ border:1px solid #BABEBF; height:30px; line-height:30px; width:215px; font-size:14px; margin-left:30px; color:#999; padding:2px; } ul.skin{ float:right; } ul.skin li{ width:15px; height:15px; border-radius:3px; display:inline-block; z-index:10; background:url("../images/theme.gif"); } ul.skin li.skin-blue{ background-position:0 0; } ul.skin li.skin-blue.selected{ background-position:0 -15px; } ul.skin li.skin-green{ background-position:-20px 0; } ul.skin li.skin-green.selected{ background-position:-20px -15px; } ul.skin li.skin-orange{ background-position:-40px 0; } ul.skin li.skin-orange.selected{ background-position:-40px -15px; } ul.skin li.skin-tianlan{ background-position:-60px 0; } ul.skin li.skin-tianlan.selected{ background-position:-60px -15px; } ul.skin li.skin-red{ background-position:-80px 0; } ul.skin li.skin-red.selected{ background-position:-80px -15px; } ul.skin li.skin-pure{ background-position:-100px 0; } ul.skin li.skin-pure.selected{ background-position:-100px -15px; } /*导航栏*/ nav>ul{ height:36px; line-height:36px; background-color:#4A4A4A; } nav ul>li{ display:inline-block; position:relative; } nav ul>li>a{ font-size:15px; font-family:"宋体"; font-weight:bold; color:#fff; display:block; padding-left:35px; } nav ul>li>a:hover{ text-decoration:underline; } /*二级导航栏*/ nav ul>li>div.subitem{ position:absolute; top:36px; left:35px; height:auto; border:1px solid #aaa; width:470px; display:none; } nav ul>li:hover>div.subitem{ display:block; } div.subitem{ background-color:#fff; } div.subitem dl{ clear:both; margin:0 10px; } div.subitem dt{ float:left; line-height:60px; font-size:14px; font-weight:bold; padding:0 15px; } div.subitem dd{ margin-top:10px; float:left; padding:0 8px; height:16px; line-height:16px; border-right:1px solid #CCC; } div.subitem dd>a{ font-size:12px; color:#aaa; display:block; } div .subitem dl:nth-child(2){ border-top:1px dashed #000; } .main-body{ margin-top:10px; } /*侧边栏布局*/ aside{ width:187px; height:auto; float:left; padding:0 10px 10px 15px; border:1px solid #6E6E6E; margin:0; padding:0; } aside h3{ background-color:#6E6E6E; color:#fff; font-size:12px; font-weight:bold; height:30px; line-height:30px; padding:0 15px; } .aside-content{ padding:0 15px 20px 15px; } .aside-content h4{ font-size:12px; color:#000; font-weight:bold; margin-top:10px; padding-bottom:3px; border-bottom:1px solid #ccc; } .aside-content ul li{ float:left; position:relative; } .aside-content ul li .hot{ background: url("../images/hot.gif") no-repeat scroll 0 0 transparent; height: 16px; position: absolute; right:20px; top:0; width: 21px; } .aside-content ul li>a{ width:70px; display:block; height:24px; line-height:24px; } .aside-content ul li>a.promoted{ color:red; } /*右侧大幅轮播广告栏*/ .content{ width:797px; float:right; overflow:hidden; } .carousel{ position:relative; height:320px; width:550px; overflow:hidden; float:left; } .carousel .item{ position:absolute; top:0; left:0; } .carousel .item.active{ position:absolute; left:0; top:0; } .carousel .carousel-control{ position:absolute; bottom:0; left:0; width:550px; } .carousel .carousel-control a{ float:left; color:#fff; width:20%; border-right:1px solid rgba(255,255,255,0.2); background-color:rgba(0,0,0,0.5); height:44px; } /*下方箭头的效果不对,因为hover本身有一个动画的过渡时长？*/ .carousel .carousel-control a.cuttent{ background-color:#37A7D7; background:url("../images/adindex.gif") no-repeat center 41px #37A7D7; } .carousel .carousel-control a em{ font-style:normal; display:block; text-align:center; line-height:22px; } /*轮播右侧小广告栏*/ .ads{ width:230px; height:320px; float:right; } .ads img{ height:180px; margin-bottom:10px; transition:all 1s ease; } .ads img:hover{ transform:rotate(-359deg); } .ads .ads-activity{ border:1px solid #ccc; font-size:12px; } .ads-activity h4{ border-bottom:1px solid #ccc; height:24px; line-height:24px; font-weight:bold; padding:0 15px; } .ads-activity ul li span:before{ content:"["; } .ads-activity ul li span:after{ content:"]"; } .ads-activity ul li>a{ color:#666; padding:0 15px; display:block; height:21px; line-height:21px; } .ads-activity ul li>a:hover{ color:#008CD7; } /*品牌活动*/ .brand-activity{ clear:both; } .brand-activity .brand-title{ padding-top:15px; border-bottom:1px solid #E4E4E4; overflow:hidden; } .brand-title h4{ float:left; padding-bottom:7px; font-weight:bold; color:#000; } .brand-title ul{ float:right; } .brand-title ul>li{ display:inline-block; } .brand-title ul>li a{ display:block; color:#000; background-color:#E4E4E4; padding: 3px 10px; } .brand-title ul>li:hover{ background: url("../images/chos.gif") no-repeat scroll 50% bottom transparent; padding-bottom: 3px; } .brand-title ul>li a:hover{ background-color:#FA5889; } /*品牌活动图片展示区*/ div.brand-content{ width:100%; height:200px; overflow:hidden; position:relative; } ul.brand-gallery{ width:4000px; position:absolute; top:0; left:0; } ul.brand-gallery li{ float:left; position:relative; margin:15px 10px 20px 5px; } ul.brand-gallery li a{ display:block; } ul.brand-gallery li span{ position:absolute; bottom:-16px; left:0; right:0; height:24px; line-height:24px; text-align:center; background-color:#EFEFEF; }
一、输入框的focus和blur
/*搜索框的效果*/ $(function(){ $("#input-search").focus(function(){ var defaultValue=$(this).attr("defaultValue"); if(this.value==defaultValue){ this.value=""; } }).blur(function(){ if(this.value==""){ this.value=$(this).attr("defaultValue"); } }).keyup(function(e){ if(e.which==13){ alert("回车提交表单"); } }); })
二、网页换肤功能（需要结合jquery的cookie插件，来记录用户的选择）
/*换肤的效果,不知道为什么，cookie的效果没有出来*/ function switchSkin(myskin){ $("#skin-css").attr("href","styles/skin/"+myskin+".css"); $("."+myskin).addClass("selected").siblings().removeClass("selected");$ //为了用户下次打开以及刷新的时候，依旧显示上次的皮肤，需要使用cookie来记录当前的选择 $.cookie("myCssSkin", myskin ,{path:"/",expires:10}); } $(function(){ var my_skin=$.cookie("myCssSkin"); alert(my_skin); if(my_skin){ switchSkin(my_skin); } $(".skin li").click(function(){ my_skin=$(this).attr("class"); switchSkin(my_skin); }); });
三、广告栏轮播效果（目前实现的是fadeIn和fadeOut的效果，之后研究下如何实现从左到右的滑动效果）
/*大幅广告栏轮播的效果*/ function showImg(index){ $(".carousel-control a").eq(index).addClass("cuttent").siblings().removeClass("cuttent"); $(".carousel-inner div").eq(index).stop(true,true).fadeIn() .siblings().stop(true,true).fadeOut(); } $(function(){ //添加广告自动执行效果 //进入广告区域时候，停止动画，否则开始动画;初始化的时候开始动画 var index=0; var adTimer=null; $(".carousel").mouseenter(function(){ clearInterval(adTimer); }).mouseleave(function(){ adTimer=setInterval(function(){ showImg(index); var length=$(".carousel-control a").length; index++; if(index==length-1){ index=0; } },4000); }).trigger("mouseleave"); //用户手动触发效果 $(".carousel-control a").mouseover(function(){ var index=$(".carousel-control a").index(this); showImg(index); }).eq(0).mouseover(); });
四、gallery的左右滚动效果
1 /*实现品牌活动的左右滑动效果*/ 2 /*在布局的时候需要注意，ul外围的div的宽度设置正好合适，并且overflow：hidden，内部ul的宽度设置大一些*/ 3 function show_page(index){ 4 $ul_show=$(".brand-gallery"); 5 var li_width=$ul_show.find("li").outerWidth(true); 6 7 var pageWidth=li_width*4; 8 9 $ul_show.stop(true,false).animate({left:-pageWidth*index},"slow"); 10 11 } 12 13 $(function(){ 14 $(".brand-title li>a").click(function(){ 15 var index=$(".brand-title li>a").index(this); 16 show_page(index); 17 //禁止超链接的默认行为 18 return false; 19 20 }); 21 });
五、新闻上下滚动的效果
基本思路：通过设置滚动ul的margin-Top来实现，将margin-Top设置为负值，令其上移，当上移动画结束的时候，将margin-top恢复为原来的值，同时将以上去的第一个元素移动到ul的最后一个。
在布局上需要注意：将滚动ul上方的元素设置为relative或者absolute布局，使得当ul设置margin-top为负值的时候，消失在原上方元素的下面。
<div class="main-content"> <aside> <div class="dongtai"> <h4 class="dongtai-title"> 最新动态 </h4> <ul class="dongtai-content"> <li><a href="#">瑞丽都疯狂推荐的秋装</a></li> <li><a href="#">48元长款针织小开衫卖疯啦.</a></li> <li><a href="#">长袖雪纺衫单穿内搭都超美..</a></li> <li><a href="#">甜美宽松毛衣今秋一定红.</a></li> <li><a href="#">夏末雪纺店主含泪大甩卖.</a></li> <li><a href="#">秋装百搭小马甲不到50元..</a></li> <li><a href="#">修身韩版小西装万人疯抢..</a></li> </ul> </div> </div>
aside h4{ position:relative; font-weight:bold; color:#fff; background-color:#3B5998; font-size:12px; height:26px; line-height:26px; padding-left:10px; z-index:10; } ul.dongtai-content{ padding:0 15px 3px 15px; border-bottom:7px solid #eee; height:95px; overflow:hidden; } ul.dongtai-content li>a{ height:22px; line-height:22px; color:#0287CA; }
/*最新动态上下循环的效果*/ function scrollNews( $obj){ //var $ul-news=$("ul.dongtai-content"); var lineHeight=$obj.find("li:first").height(); $obj.animate({"margin-Top":-lineHeight+"px"},600,function(){ $obj.css({"margin-Top":0}); $obj.find("li:first").appendTo($obj); }); } $(function(){ var $ul_news=$("ul.dongtai-content"); var scrollTimer; scrollTimer=setInterval(function(){ scrollNews($ul_news); },3000); });
六、树状目录折叠效果的实现
基本思路：使用next()选择器，以及slideUp和slideDown动画
<div class="global_module procatalog"> <h4 class="dongtai-title" > 产品分类 <span> </span> </h4> <ul class="m-treeview"> <li class="m-expanded"> <span>衬衫</span> <ul> <li><span>短袖衬衫</span></li> <li><span>长袖衬衫</span></li> </ul> </li> <li class="m-expanded"> <span>卫衣</span> <ul> <li ><span>开襟卫衣</span></li> <li ><span>套头卫衣</span></li> </ul> </li> <li class="m-expanded"> <span>裤子</span> <ul> <li><span>休闲裤</span></li> <li><span>免烫卡其裤</span></li> <li><span>牛仔裤</span></li> <li><span>短裤</span></li> </ul> </li> </ul> </div>
ul.m-treeview{
padding:7px 10px 3px 10px;
border-bottom:7px solid #eee;
}
ul.m-treeview li span{
display:block;
height:22px;
line-height:22px;
cursor:pointer;
}
li.m-expanded{
padding-left:16px;
background:url(../img/treeview-expanded.gif) no-repeat 0 3px;
}
li.m-expanded.collapsed{
background:url(../img/treeview-collapsed.gif) no-repeat 0 3px;
}
.m-expanded ul>li{
padding-left:20px;
background:url(../img/treeview-item.gif) no-repeat 0 3px;
}
/*树状目录的展开和折叠*/
$(function(){
$(".dongtai-title").toggle(
function(){
$(this).next("ul").slideUp();
$(this).find("span").addClass("up");
},function(){
$(this).next("ul").slideDown();
$(this).find("span").removeClass("up");
}
);
});
$(function(){
$("li.m-expanded>span").toggle(
function(){
$(this).next("ul").slideUp();
$(this).parent("li.m-expanded").addClass("collapsed");
},function(){
$(this).next("ul").slideDown();
$(this).parent("li.m-expanded").removeClass("collapsed");
}
);
});
六、上下滑动广告栏效果
基本思路：
1.在css布局中，将包围ul的外围div的高度固定，并设置overflow:hidden，position:relative;将其包裹的ul，ul中的li设置为绝对布局。
2.上下滑动的过程就是更改ul的top值的过程（注意不是更改li的top值）。
<div class="ads-wrapper"> <ul class="ads"> <li class="ads1"><a href="#"><img src="img/ads/1.gif"/></a></li> <li class="ads2"><a href="#"><img src="img/ads/2.gif"/></a></li> <li class="ads3"><a href="#"><img src="img/ads/3.gif"/></a></li> <li class="ads4"><a href="#"><img src="img/ads/4.gif"/></a></li> <li class="ads5"><a href="#"><img src="img/ads/5.gif"/></a></li> </ul> <ul class="ads-index"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>
/*广告栏的布局*/
.ads-wrapper{
position:relative;
height:150px;
width:590px;
overflow:hidden;
}
ul.ads{
position:relative;
}
.ads .ads1{
position:absolute;
top:0;
left:0;
}
.ads .ads2{
position:absolute;
top:150px;
left:0;
}
.ads .ads3{
position:absolute;
top:300px;
left:0;
}
.ads .ads4{
position:absolute;
top:450px;
left:0;
}
.ads .ads5{
position:absolute;
top:600px;
left:0;
}
ul.ads-index{
position:absolute;
right:15px;
bottom:5px;
}
.ads-index li{
width:17px;
height:17px;
text-align:center;
float:left;
border:1px solid orange;
color:orange;
margin-left:10px;
background-color:#fff;
}
.ads-index li.current{
height:20px;
background-color:orange;
color:#fff;
font-weight:bold;
}
/*大屏幕广告栏的上下滚动效果实现*/
function scrollAds($ul_ads,index){
var height=$ul_ads.find("li:first").height();
var position=height*index+"px";
//注意是给ul增加动画，而不是给其中的li增加
$ul_ads.stop(true,false).animate({top:"-"+position},1000);
$(".ads-index>li").eq(index).addClass("current").siblings().removeClass("current");
}
$(function(){
var adsTimer;
var index=0;
$("ul.ads").hover(function(){
clearInterval(adsTimer);
},function(){
adsTimer=setInterval(function(){
scrollAds($("ul.ads"),index);
if(index==4){
index=0;
}else{
index++;
}
},3000);
}).trigger("mouseleave");
$(".ads-index>li").mouseover(function(){
index=$(".ads-index>li").index($(this));
scrollAds($("ul.ads"),index);
$(this).addClass("current").siblings().removeClass("current");
}).eq(0).mouseover();
});
六、左右滑动效果
基本思路：
1.在css布局中，将包围ul的外围div的宽度固定，并设置overflow:hidden，position:relative;
2.将其包裹的ul设置为绝对布局。
3.左右滑动的过程就是更改ul的left值的过程。
4，对于向左向右按钮的控制，有些类似于数据库的分类查询，设置page_count,page_size,current_page这几个属性，这几个元素的值通过调用width()等获得外围元素的宽度，以及内部li的宽度来获得。
<div class="product-wrapper"> <div class="product-title"> <h4>新款上市</h4> <div class="product-nav"> <span class="left">left</span> <span class="right">right</span> </div> </div> <div class="prolist_content"> <ul> <li> <a href="detail.html"><img src="img/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="img/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="img/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="img/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="img/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="img/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="img/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="img/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="img/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="img/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="img/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="img/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> </ul> </div> </div>
/*右下方的产品展示区域*/
.product-wrapper{
border-top:10px solid #eee;
border-bottom:10px solid #eee;
overflow:hidden;
}
.product-title{
height:27px;
line-height:27px;
background-color:#3B5998;
}
.product-title h4{
display:inline-block;
color:#fff;
font-weight:bold;
margin-left:5px;
}
.product-nav{
float:right;
margin-right:20px;
}
.product-nav span{
margin-top:5px;
width:17px;
height:17px;
display:inline-block;
text-indent:99999px;
overflow:hidden;
}
.product-nav .left{
background-image:url(../img/left.gif);
}
.product-nav .right{
background-image:url(../img/right.gif);
}
.prolist_content{
width:auto;
height:200px;
border-bottom:1px solid #eee;
position:relative;
}
.prolist_content ul{
position:absolute;
top:0;
left:0;
height:200px;
margin-top:20px;
width:5000px;
}
.prolist_content ul li{
float:left;
margin-right:15px;
margin-left:10px;
}
.prolist_content ul li img{
width:124px;
height:124px;
}
.prolist_content ul li>span{
display:block;
text-align:center;
}
/*产品展示区域的左右滚动效果*/
$(function(){
var index=0;
var v_width=$(".product-wrapper").width();
var item_width=$(".prolist_content ul li:first").width();
var page_count=Math.floor(v_width/item_width);
var item_count=$(".prolist_content ul li").length;
var page_size=Math.ceil(item_count/page_count);
var current_page=0;
var left_position=0;
$(".product-nav .left").click(function(){
if(current_page==0){
current_page=page_size-1;
}else{
current_page--;
}
left_position=-v_width*current_page;
$(".prolist_content ul").animate({"left":left_position+"px"},1000);
});
$(".product-nav .right").click(function(){
if(current_page==page_size-1){
current_page=0;
}else{
current_page++;
}
left_position=-v_width*current_page;
$(".prolist_content ul").animate({"left":left_position+"px"},1000);
});
});