码迷,mamicode.com
首页 > Web开发 > 详细

【html】【19】高级篇--大事件时间轴

时间:2015-12-12 18:41:56      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

下载:  http://sc.chinaz.com/jiaoben/131112181390.htm

其它:  http://sc.chinaz.com/tag_jiaoben/shijianzhou.html

效果:  

技术分享

html 代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <link rel="stylesheet" href="css/about.css">
 6 <style>
 7 .page { width:100%;background:#F0F0F0 url(‘img/dian2.png‘) repeat-x; }
 8 </style>
 9 <title>大事记jQuery时间轴</title>
10 </head>
11 <body>
12 <div class="page">
13 <div class="header">
14 </div>
15 
16 <div class="box">
17     <ul class="event_year">
18         <li class="current"><label for="2013">2013</label></li>
19         <li><label for="2012">2012</label></li>
20         
21     </ul>
22     <ul class="event_list">
23         <div>
24             <h3 id="2013">2013</h3>
25             <li>
26             <span>5月26日</span>
27             <p><span>站长之家专栏改版上线</span></p>
28             </li>
29                 <li>
30             <span>4月</span>
31             <p><span>站长工具旗下产品,超级监控上线</span></p>
32             </li>
33         </div>
34         <div>
35             <h3 id="2012">2012</h3>
36             <li>
37             <span>9月</span>
38             <p><span>站长之家北京分公司成立</span></p>
39             </li>
40             
41         </div>
42         
43     </ul>
44     <div class="clearfix"></div>
45     
46     </div>
47 </div>
48 <script src="js/jquery.min_v1.0.js" type="text/javascript"></script>
49 <script>
50 $(function(){
51     $(label).click(function(){
52         $(.event_year>li).removeClass(current);
53         $(this).parent(li).addClass(current);
54         var year = $(this).attr(for);
55         $(#+year).parent().prevAll(div).slideUp(800);
56         $(#+year).parent().slideDown(800).nextAll(div).slideDown(800);
57     });
58 });
59 </script>
60 <div style="text-align:center;clear:both"> 61 <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> 62 </div> 63 </body> 64 </html>

 

ok

 

【html】【19】高级篇--大事件时间轴

标签:

原文地址:http://www.cnblogs.com/aiqingqing/p/5041565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!