您的位置：首页 > Web前端 > JQuery

jquery特效-淘宝聚惠11.11效果

2015-06-06 12:48 676 查看
jquery特效-淘宝聚惠11.11效果

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

 <head>

  <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->

  <meta http-equiv="Content-Type" content="text/html; charset=gbk">

  <!--当前页面的三要素-->

  <title>标题</title>

  <meta name="Keywords" content="关键词,关键词">

  <meta name="description" content="描述"> 

  <!--css , js-->

<style type="text/css">

*{margin:0px;padding:0px;}

#louti{width:120px; position:fixed; left:20px; bottom:0px;}

#louti ul li{height:38px; line-height:38px;font-size:14px; text-align:center; list-style-type:none; 

   background:url("pic/bg1.png") no-repeat 110px 16px;}

#louti ul li a{color:#fff; font-family:"微软雅黑"; text-decoration:none;}

#louti ul li.gray1{background-color:#1f1a23;}

#louti ul li.gray2{background-color:#2f2f2f;}

#louti ul li.gray3{background-color:#f93470;}

#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8{font-size:40px; color:#fff;height:500px; text-align:center; }

#box1{background:#f93470; }

#box2{ background:#34f942;  }

#box3{ background:#f99134; }

#box4{ background:#2e27c6; }

#box5{ background:#601171; }

#box6{ background:#f93470;}

#box7{ background:#34f942; }

#box8{background:#2e27c6;}

</style>
 </head>

<body>
<!--楼梯式栏目导航 start-->

<div id="louti">

 <img src="pic/xxpic.png" />

 <ul>

  <li class="gray3"><a href="#">服装服饰专场</a></li>

  <li><a href="#">鞋包户外专场</a></li>

  <li><a href="#">美妆配饰专场</a></li>

  <li><a href="#">数码/食品专场</a></li>

  <li><a href="#">优质团购专场</a></li>

  <li><a href="#">母婴/家居专场</a></li>

  <li><a href="#">淘宝热卖专场</a></li>

  <li><a href="#">低价购车专场</a></li>

 </ul>

 <img class="top" src="pic/top.png" />

</div> 

<!--楼梯式栏目导航 end-->

<div id="box1">服装服饰专场</div>

<div id="box2">鞋包户外专场</div>

<div id="box3">美妆配饰专场</div>

<div id="box4">数码/食品专场</div>

<div id="box5">优质团购专场</div>

<div id="box6">母婴/家居专场</div>

<div id="box7">淘宝热卖专场</div>

<div id="box8">低价购车专场</div>
 
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

 $("#louti ul li:even").addClass("gray1");

 $("#louti ul li:odd").addClass("gray2");

 $("#louti ul li").click(function(){

  $(this).addClass("gray3").siblings().removeClass("gray3");

  var index = $(this).index()+1;

  var $target = $("#box"+index);

  var top = $target.offset().top;

  $("body,html").stop(true,true).animate({"scrollTop":top}); 

 });
 $(".top").click(function(){

  $("body,html").stop(true,true).animate({"scrollTop":0}); 

 });

</script>

</body>

</html>
 







内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航