前言
昨天的进度有点延缓,只做了快速导航特效,都是晚上回来一点多才基本结束,其中很多问题也没有修正,就只有一个白板特效。
今天是假日的最后一天,所以需要有一个结果了,看来这次只能做首页了,乐观情况下需要把整个首页布局弄出来,再优化了。
回顾特效,为什么absolute
我们回顾下之前的几个特效,无论是导航上跟着走的背景,还是爆炸的图片,到昨天做的快速导航特效,他们全是采用绝对定位!
然后来看看我们马上要做的新闻列表:
注意他点击翻页后整个新闻列表是有翻滚特效的,我刚刚看了下新闻dom结构与样式,不错,他也是绝对定位的!
我们这里其实可以简单分析下原因:
因为绝对定位的元素脱离了文档流,我们对他们的操作(动画)只会影响相关元素,而不会导致整个页面的回流,从而提高页面性能。
所以具有复杂特效的dom结构,最好还是使用绝对定位。
新闻列表
好了,我们继续今天的任务,我们先使用本地数据库导入一定数据,在完成新闻列表的特效,说干就干,先本地数据库,这里就只输入标题就好了。
PS:我本来想采用本地数据库的,却发现连ff都不支持,所以算了吧,我们自己出效果就好了。。。。
我们先来看看他的dom结构:
1 <li>
2 <div>
3 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[公告]关于2月2日公开课案例bug修复</a><span>2013-03-24</span><br>
4 <a href="#"></a><span></span>
5 </div>
6 <em></em></li>
他这个实现我们可以看一看,他点击翻页后,其实是将新数据填充到下面的a标签和span里面,然后对div进行向上平移,li overflow:hidden,
也是以jquery特效实现的,我这里就不模拟了,看看自己可以怎么实现呢?
基础样式与结构
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; }
7 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋体' , '宋体' ,Verdana; font-size: 12px; color: #EEEEEE; }
8
9 ul, ol { list-style-type: none; }
10 select, input, img { outline: medium none; vertical-align: middle; }
11 a { text-decoration: none; outline: medium none; color: White; }
12
13 .box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 50px 100px;}
14 .box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px; text-shadow: 1px 1px 1px #000000; display: inline-block; }
15 .box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; }
16 .box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; }
17 .box .h .pre{ background-position: -513px -29px;}
18 .box .h .next{ background-position: -526px -29px;}
19
20
21
22 .box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;}
23 .box .c a { color: #474747; }
24 .box .c a:hover { color: Black; text-decoration: underline; }
25 .box .list span { float: right;}
26
27
28 </style>
29 <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
30 <script type="text/javascript">
31 $(document).ready(function () {
32
33
34 });
35
36 </script>
37 </head>
38 <body>
39 <div id="news" class="box">
40 <div class="h">
41 <h3>
42 新闻中心<span>News center</span></h3>
43 <a class="next" title="下一页" href="javascript:;"></a><a class="pre" title="上一页" href="javascript:;"></a>
44 </div>
45 <div class="c">
46 <ul class="list">
47 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">[公告]关于2月2日公开课案例bug修复</a>
48 <span>2013-03-24</span> </li>
49 <li><a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公开课已提供下载</a>
50 <span>2013-03-24</span> </li>
51 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公开课</a>
52 <span>2013-03-24</span> </li>
53 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社乔迁新址</a> <span>
54 2013-03-24</span> </li>
55 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">不会JavaScript能混前端么?</a>
56 <span>2013-03-24</span> </li>
57 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公开课视频已提供下载</a>
58 <span>2013-03-24</span> </li>
59 <li><a target="_blank" href="http://www.zhinengshe.com/news/26.html">论坛开放邀请注册了哦</a>
60 <span>2013-03-24</span> </li>
61 </ul>
62 </div>
63 </div>
64
65 </body>
66 </html>
原网站都是采用背景图的方式,我这里用了一点css3的东西给形成了这种结构,我们来看看我们这个dom结构:
他整个结构是很清晰的,其中class h单独出来了,是为了有可能会出现的选项卡相关。现在我们来看看分页的效果如何实现呢?
经过测试,我发现他们那种做法是有道理的,所以我决定模仿之。。。。。所以代码改变了下下:
效果实现
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <style type="text/css">
6 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; }
7 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋体' , '宋体' ,Verdana; font-size: 12px; color: #EEEEEE; }
8
9 ul, ol { list-style-type: none; }
10 select, input, img { outline: medium none; vertical-align: middle; }
11 a { text-decoration: none; outline: medium none; color: White; }
12
13 .box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 50px 100px;}
14 .box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px; text-shadow: 1px 1px 1px #000000; display: inline-block; }
15 .box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; }
16 .box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; }
17 .box .h .pre{ background-position: -513px -29px;}
18 .box .h .next{ background-position: -526px -29px;}
19
20 .box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;}
21 .box .c a { color: #474747; }
22 .box .c a:hover { color: Black; text-decoration: underline; }
23 .box .list { position: absolute; width: 306px; }
24 .box .list span { float: right;}
25 .box .list li { position: relative; height: 24px; line-height: 24px; overflow: hidden; z-index: 10; }
26
27 .box .list li div{ top: 0; position: absolute; z-index: 2; width: 100%; transition: top 0.3s linear; }
28
29
30 </style>
31 <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
32 <script type="text/javascript">
33 $(document).ready(function () {
34 var next = $('#next');
35 var pre = $('#pre');
36
37 var next_data = [
38 '[公告]关于2月2日公开课案例bug修复001',
39 'js视频下载第四波来啦',
40 'JS课程2013年开班信息',
41 '新的JS课程页面更新',
42 'JS视频教程免费第四波 欢迎观看~',
43 'js视频下载第三波来啦',
44 '2月3日YY公开课视频已提供下载'
45 ];
46 next.click(function () {
47 //此处代码有点恶心。。。
48 $('.list li div').each(function (i) {
49 var el = $(this);
50 setTimeout(function () {
51 el.append($('<br/><a href="javascript:;">' + next_data[i] + '</a><span>2013-03-24</span>'));
52 el.css('top', '-24px');
53 }, 150 * i);
54 });
55 });
56 pre.click(function () {
57 //此处代码有点恶心。。。
58 $('.list li div').each(function (i) {
59 var el = $(this);
60 setTimeout(function () {
61 el.css('top', '0');
62 }, 150 * i);
63 });
64 });
65
66 });
67
68 </script>
69 </head>
70 <body>
71 <div id="news" class="box">
72 <div class="h">
73 <h3>
74 新闻中心<span>News center</span></h3>
75 <a class="next" id="next" title="下一页" href="javascript:;"></a><a class="pre" id="pre" title="上一页" href="javascript:;"></a>
76 </div>
77 <div class="c">
78 <ul class="list">
79 <li>
80 <div>
81 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[公告]关于2月2日公开课案例bug修复</a>
82 <span>2013-03-24</span>
83 </div>
84 </li>
85 <li>
86 <div>
87 <a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公开课已提供下载</a>
88 <span>2013-03-24</span>
89 </div>
90 </li>
91 <li>
92 <div>
93 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公开课</a>
94 <span>2013-03-24</span>
95 </div>
96 </li>
97 <li>
98 <div>
99 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社乔迁新址</a> <span>2013-03-24</span>
100 </div>
101 </li>
102 <li>
103 <div>
104 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">不会JavaScript能混前端么?</a>
105 <span>2013-03-24</span>
106 </div>
107 </li>
108 <li>
109 <div>
110 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公开课视频已提供下载</a>
111 <span>2013-03-24</span>
112 </div>
113 </li>
114 <li>
115 <div>
116 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">论坛开放邀请注册了哦</a>
117 <span>2013-03-24</span>
118 </div>
119 </li>
120 </ul>
121 </div>
122 </div>
123
124 </body>
125 </html>
这个特效效果基本与原版一致了,因为其中li是绝对布局,所以动画亦不会引起页面重排,所以效率上应该不会有太大影响,值得一提的是,这里采用css引起的动画哦。
整体布局
经过这两天学习,主要完成了导航特效,图片flash特效,快速导航特效以及今天的新闻列表翻页特效。
其它功能便暂时搁浅了,我这里来整体布局,将他们揉到一起看看什么效果!
完整页面代码
1 <!DOCTYPE html>
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6 <style type="text/css">
7 body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; }
8 body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋体' , '宋体' ,Verdana; font-size: 12px; color: #EEEEEE; overflow-y: scroll; overflow-x: hidden;}
9 ul, ol { list-style-type: none; }
10 select, input, img { outline: medium none; vertical-align: middle; }
11 a { text-decoration: none; outline: medium none; color: White; }
12
13 /*导航相关 begin*/
14 .nav_c { width: 1000px; margin: 40px auto 0; }
15 .logo { float: left; margin-top: -20px; }
16 .nav { width: 720px; background: url("images/navBg.png") no-repeat; height: 77px; padding-left: 40px; position: relative; z-index: 10; right: 0; margin-left: 265px; }
17 .nav div { position: absolute; background: url("images/navA_hover.png") no-repeat; width: 116px; height: 78px; text-indent: -9999px; top: -2px; z-index: -10; }
18 .nav ul { }
19 .nav ul li { display: inline-block; line-height: 60px; height: 77px; width: 106px; text-align: center; margin: 0 2px; }
20 .nav ul li a { font-size: 14px; color: White; text-shadow: 1px 1px 1px #000000; font-family: Verdana; }
21 .nav ul li a:hover { color: #63B1FF; text-shadow: 1px 1px 1px #000000; }
22 .nav ul li span { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 1px 1px 0 #000000; height: 14px; margin: 24px -8px 0 0; overflow: hidden; vertical-align: top; width: 1px; float: right; }
23 /*导航相关 end*/
24
25 /*header begin*/
26 .header { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); height: 26px; line-height: 26px; box-shadow: 1px 2px 10px #000000; }
27 .header .main{ width: 990px; margin: 0 auto;}
28 .header h3 { font-size: 12px; font-weight: normal; color: #CDCDCD; float: left; width: 700px; }
29 .header .tool_bar{ float: right;}
30 .header .tool_bar a{ color: White; color: #CDCDCD; }
31 /*header end*/
32
33 /*flash img begin*/
34 #flash { background: url("images/slideBg.png") no-repeat; width: 1010px; height: 385px; position: relative; margin: 10px auto; }
35 .outer { background: url("pic/1.png") no-repeat; width: 840px; height: 306px; position: relative; transition: background-image 10s linear; border-radius: 10px; top: 32px; left: 84px; }
36 .outer div { background: url("pic/1.png"); width: 134px; height: 153px; position: absolute; transition: transform 0.5s linear; text-indent: -9999px; }
37
38 .bt { display: inline-block; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 41px; height: 42px; text-indent: -9999px; position: absolute; opacity: 0.5; transition: opacity 1s linear; }
39 #pre { background-position: -274px -43px; top: 160px; left: 20px; }
40 #next { background-position: -315px -43px; top: 160px; right: 20px; }
41 #pre:hover { background-position: -273px 0; opacity: 1; }
42 #next:hover { background-position: -314px 0; opacity: 1; }
43 #pager { position: absolute; bottom: 14px; right: 100px; }
44 #pager a { display: inline-block; width: 24px; height: 24px; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; opacity: 0.5; transition: opacity 1s linear; background-position: -143px -1px; text-indent: -9999px; } #pager .sec { opacity: 1; background-position: -119px -1px;}
45 #pager a:hover { opacity: 1; background-position: -119px -1px; }
46
47 /*flash img end*/
48
49 /*快速导航 begin*/
50 .fast_nav { width: 72px; height: 72px; position: fixed; top: 50px; right: 30px; transition: right 0.2s linear, top 0.2s linear;}
51 #fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute; right: -8px; top: -8px; z-index: 700; display: none; }
52 #fast_nav_close div { background: white; border-radius: 4px; text-indent: -9999px; width: 0; height: 0; border: 1px solid white; transform: rotate(45deg); cursor: pointer; }
53 #fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; }
54 #fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; }
55 #fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -9999px; position: absolute; cursor: pointer; z-index: 500; }
56
57 .fast_nav .list { width: 0; height: 0; position: absolute; background: url("images/fast_nav_open.png") no-repeat; display: none; }
58 .fast_nav h3{font-family: "Microsoft YaHei"; font-size: 18px; text-shadow:0 0 2px white; font-weight: normal;}
59 .fast_nav .list li{ line-height: 22px; overflow: hidden; min-width: 260px; }
60 #fast_nav01 { right: 303px; top: 188px; background-position: 0 0; height: 0; z-index: 400; }
61 #fast_nav02 { background-position: -303px 0; z-index: 399; }
62 #fast_nav03 { background-position: 0 -186px; z-index: 377; }
63 #fast_nav04 { background-position: -303px -186px; z-index: 388; }
64
65 #fast_nav01 ul{ margin-left: 54px;}
66 #fast_nav02 ul{ margin-left: 54px;}
67 #fast_nav03 ul{ margin-left: 54px; margin-top: 30px;}
68 #fast_nav04 ul{ margin-left: 54px; margin-top: 30px;}
69
70 #fast_nav01 h3{ margin: 26px 0 26px 66px;}
71 #fast_nav02 h3{ margin: 26px 0 26px 150px}
72 #fast_nav03 h3{ margin: 26px 0 0 76px;}
73 #fast_nav04 h3{ margin: 26px 86px 0 0; text-align: right; }
74
75 .fast_nav h3{ display: none; }
76 .fast_nav ul{ display: none; }
77
78 div.open { width: 606px; height: 376px; }
79 div.open h3 { display: block; }
80 div.open ul { display: block; }
81 div.open .list { width: 303px; height: 188px; }
82 div.open #fast_nav_bt { left: 267px; top: 152px; }
83
84 /*快速导航 end*/
85
86 /*新闻列表 begin*/
87 .box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 10px auto;}
88 .box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px; text-shadow: 1px 1px 1px #000000; display: inline-block; }
89 .box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; }
90 .box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; }
91 .box .h .pre{ background-position: -513px -29px;}
92 .box .h .next{ background-position: -526px -29px;}
93
94 .box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;}
95 .box .c a { color: #474747; }
96 .box .c a:hover { color: Black; text-decoration: underline; }
97 .box .list { position: absolute; width: 306px; }
98 .box .list span { float: right;}
99 .box .list li { position: relative; height: 24px; line-height: 24px; overflow: hidden; z-index: 10; }
100
101 .box .list li div{ top: 0; position: absolute; z-index: 2; width: 100%; transition: top 0.3s linear; }
102 /*新闻列表 end*/
103
104 .main { width: 1000px; margin: 10px auto 0;}
105 #main_r { float: right; width: 640px; }
106 #main_r li{ display: inline-block; text-align: center; margin: 0 12px; }
107 #main_r a { width: 100px; height: 100px; display: block; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; float: none; margin: 0 auto; }
108 #main_r .js { background-position: -111px -369px; }
109 #main_r .html { background-position: 0 -367px; }
110 #main_r .css { background-position: -220px -366px; }
111
112 </style>
113 <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
114 <script type="text/javascript">
115 $(document).ready(function () {
116
117 //导航相关
118 var div_hover = $('#nav_div');
119 var nav = $('#nav');
120 $('#nav ul').delegate('li', 'mouseenter', function (e) {
121 var el = $(this),
122 el_left = el.offset().left,
123 div_left = div_hover.offset().left;
124 time_step = 100;
125 var l = el_left - nav.offset().left;
126 div_hover.stop().animate({ left: l + 'px' }, time_step, function () {
127 if (el_left > div_left) {
128 div_hover.animate({ left: (l - 20) + 'px' }, time_step).animate({ left: l + 'px' }, time_step);
129 } else {
130 div_hover.animate({ left: (l + 20) + 'px' }, time_step).animate({ left: l + 'px' }, time_step);
131 }
132 });
133 });
134
135 //flash图片相关
136 var index = 1;
137 var timer = null;
138 $('#outer div').each(function (i) {
139 var el = $(this);
140 var y = i > 5 ? 153 : 0,
141 x = i > 5 ? i - 6 : i;
142 el.css({ 'left': (x * 134) + 'px', 'top': y + 'px', 'background-position': (-1 * x * 134) + 'px ' + (-1 * y) + 'px' });
143 var s = '';
144 });
145 function setFlash() {
146 if (timer) clearTimeout(timer);
147 $('#outer').css('background-image', 'url("pic/' + index + '.png")');
148 $('#pager a').removeClass('sec');
149 $('#pager .p' + index).addClass('sec');
150 $('#outer div').each(function (i) {
151 var el = $(this);
152 var step = 200;
153 var x = 0, y = 0;
154 var regx = Math.round(Math.random() * 80);
155 var regy = Math.round(Math.random() * 80);
156 var r1 = Math.random() > 0.5 ? 1 : -1;
157 var r2 = Math.random() > 0.5 ? 1 : -1;
158 if (i < 3) {
159 x = -1 * step;
160 y = -1 * step;
161 } else if (i < 6) {
162 x = step;
163 y = -1 * step;
164 } else if (i < 9) {
165 x = -1 * step;
166 y = step;
167 } else {
168 x = step;
169 y = step;
170 }
171 x += r1 * Math.random() * step;
172 y += r2 * Math.random() * step;
173 el.css('transform', 'translate(' + x + 'px, ' + y + 'px) skew(' + regx + 'deg, ' + regy + 'deg)');
174 // el.css('transform', 'rotate(360deg)');
175 setTimeout(function () {
176 el.css('transform', '');
177 el.css('background-image', 'url("pic/' + index + '.png")');
178 }, 500);
179 });
180 }
181 $('#pre').click(function () {
182 if (index == 1) index = 5; else index--;
183 setFlash();
184 });
185 $('#next').click(function () {
186 if (index == 5) index = 1; else index++;
187 setFlash();
188 });
189 $('#pager').delegate('a', 'click', function () {
190 var el = $(this);
191 var num = el.html();
192 index = num;
193 setFlash();
194 });
195 var func = function () {
196 if (index == 5) index = 1; else index++;
197 setFlash();
198 timer = setTimeout(func, 3000);
199 }
200 func();
201
202 //快速导航
203 var step = 250;
204 // width: 606px; height: 376px;
205 // transition: width 1s linear, height 1s linear;
206 $('#fast_nav_bt').click(function () {
207 click_fast();
208 });
209 $('#fast_nav_close').click(function () {
210 click_fast();
211 });
212
213 function click_fast() {
214 if ($('#fast_nav').hasClass('open')) {
215 close_nav3();
216 } else {
217 var r = (parseInt($(window).width()) / 2 - 303) + 'px';
218 $('#fast_nav').css({ right: r, top: '100px' });
219 open_fast();
220 }
221 }
222
223 function open_fast() {
224 $('#fast_nav').addClass('open');
225 setTimeout(open_nav1, step)
226 }
227
228 function open_nav1() {
229 $('#fast_nav01').css('width', '303px');
230 $('#fast_nav01').show();
231 $('#fast_nav01').animate({ height: '188px', top: '0' }, step, open_nav2);
232 }
233 function open_nav2() {
234 $('#fast_nav02').css({ 'left': '0', 'top': '0' }).show();
235 $('#fast_nav02').animate({ left: '303px' }, step, open_nav4);
236 }
237 function open_nav3() {
238 $('#fast_nav03').css({ 'left': '303px', 'top': '188px' }).show();
239 $('#fast_nav03').animate({ left: '0' }, step);
240 $('#fast_nav_close').show();
241 }
242 function open_nav4() {
243
244 $('#fast_nav04').css({ 'left': '303px', 'top': '0' }).show();
245 $('#fast_nav04').animate({ top: '188px' }, step, open_nav3);
246 }
247
248 // function close_fast() {
249 // $('#fast_nav_bt').animate({ left: '0', top: '0' }, step, close_nav3);
250 // }
251 function close_nav3() {
252 $('#fast_nav_close').hide();
253 $('#fast_nav03').stop().animate({ left: '188px' }, step, close_nav4);
254 }
255 function close_nav4() {
256 $('#fast_nav03').hide();
257 $('#fast_nav04').animate({ top: '0' }, step, close_nav2);
258 }
259 function close_nav2() {
260 $('#fast_nav04').hide();
261 $('#fast_nav02').animate({ left: '0' }, step, close_nav1);
262 }
263 function close_nav1() {
264 $('#fast_nav02').hide();
265 $('#fast_nav01').animate({ top: '188px', height: '0' }, step, function () {
266 $('#fast_nav01').css('width', '0');
267 $('#fast_nav').removeClass('open');
268 $('#fast_nav').css({ right: '30px', top: '50px' });
269 // close_fast();
270 }).hide();
271 }
272
273 //新闻列表
274 var next = $('#list_next');
275 var pre = $('#list_pre');
276
277 var next_data = [
278 '[公告]关于2月2日公开课案例bug修复001',
279 'js视频下载第四波来啦',
280 'JS课程2013年开班信息',
281 '新的JS课程页面更新',
282 'JS视频教程免费第四波 欢迎观看~',
283 'js视频下载第三波来啦',
284 '2月3日YY公开课视频已提供下载'
285 ];
286 next.click(function () {
287 //此处代码有点恶心。。。
288 $('.list li div').each(function (i) {
289 var el = $(this);
290 setTimeout(function () {
291 el.append($('<br/><a href="javascript:;">' + next_data[i] + '</a><span>2013-03-24</span>'));
292 el.css('top', '-24px');
293 }, 150 * i);
294 });
295 });
296 pre.click(function () {
297 //此处代码有点恶心。。。
298 $('.list li div').each(function (i) {
299 var el = $(this);
300 setTimeout(function () {
301 el.css('top', '0');
302 }, 150 * i);
303 });
304 });
305
306 }); //ready
307
308 </script>
309
310 </head>
311 <body>
312 <header class="header">
313 <div class="main">
314 <h3>
315 智能社是一家专注于web前端开发技术的专业培训机构,现推出“HTML5”、“JavaScript”和“HTML+CSS”三套课程</h3>
316 <div class="tool_bar">
317 <a href="javascript:;">登陆</a> | <a href="javascript:;">关于我们</a></div>
318 </div>
319 </header>
320 <div class="nav_c">
321 <h1 class="logo">
322 <a href="http://www.zhinengshe.com/">
323 <img alt="智能社——前端培训专家" src="images/logo.png"></a>
324 </h1>
325 <nav class="nav" id="nav">
326 <div id="nav_div">
327 hover</div>
328 <ul>
329 <li><a href="javascript:;">首页</a><span></span></li>
330 <li><a href="javascript:;">JS课程</a><span></span></li>
331 <li><a href="javascript:;">HTML5课程</a><span></span></li>
332 <li><a href="javascript:;">视频课程</a><span></span></li>
333 <li><a href="javascript:;">课程案例</a><span></span></li>
334 <li><a href="javascript:;">联系方式</a></li>
335 </ul>
336 </nav>
337 </div>
338 <div id="flash">
339 <a id="pre" href="javascript:;" class="bt">pre</a> <a id="next" href="javascript:;"
340 class="bt">next</a>
341 <div id="pager">
342 <a class="p1" href="javascript:;">1</a> <a class="p2" href="javascript:;">2</a>
343 <a class="p3" href="javascript:;">3</a> <a class="p4" href="javascript:;">4</a>
344 <a class="p5" href="javascript:;">5</a>
345 </div>
346 <div class="outer" id="outer">
347 <div>
348 1</div>
349 <div>
350 2</div>
351 <div>
352 3</div>
353 <div>
354 4</div>
355 <div>
356 5</div>
357 <div>
358 6</div>
359 <div>
360 7</div>
361 <div>
362 8</div>
363 <div>
364 9</div>
365 <div>
366 10</div>
367 <div>
368 11</div>
369 <div>
370 12</div>
371 </div>
372 </div>
373 <div id="fast_nav" class="fast_nav">
374 <div id="fast_nav_bt">
375 fast_nav
376 </div>
377 <div id="fast_nav_close">
378 <div class="nav_x">
379 x
380 </div>
381 <div class="nav_y">
382 y
383 </div>
384 </div>
385 <div id="fast_nav01" class="list">
386 <h3 class="fastCom_title_l">
387 近期开班信息</h3>
388 <ul>
389 <li>JS周末班 2012年10月13日开班 [已开班]</li><li>JS全日制 2012年10月19日开班 <a
390 href="contact.html">[咨询]</a></li><li>HTML5周末班 2012年10月21日开班 <a href="contact.html">[咨询]</a></li><li>
391 JS周末班 2012年11月17日开班 <a href="contact.html">[咨询]</a></li></ul>
392 </div>
393 <div id="fast_nav02" class="list">
394 <h3 class="fastCom_title_r">
395 最新留言</h3>
396 <ul>
397 <li><a href="message.html">老师 这个留言板分页 鼠标移动上去 就...</a></li><li><a href="message.html">
398 看到16集里说会开远程教学,不知道是不...</a></li><li><a href="message.html">这个站做的真的很牛逼呀,貌似后台都是...</a></li><li>
399 <a href="message.html">现在有没有能加上的Q群啊blue老湿</a></li></ul>
400 </div>
401 <div id="fast_nav03" class="list">
402 <ul>
403 <li><a href="js02_desc.html#zns_zt_content">JS课程包括哪些内容?</a></li><li><a href="html5_01_desc.html#zns_zt_content">
404 HTML5课程包括哪些内容?</a></li><li><a href="js02_desc.html#zns_zt_content">课程收费是多少?</a></li><li>
405 <a href="contact.html">我想去学习,如何报名呢?</a></li></ul>
406 <h3 class="fastCom_title_l">
407 常见问题</h3>
408 </div>
409 <div id="fast_nav04" class="list">
410 <ul>
411 <li><a href="http://www.zhinengshe.com/news/4.html">积分系统上线</a></li><li><a href="http://www.zhinengshe.com/news/1.html">
412 邀请码系统开始公测</a></li><li><a href="http://zhinengshe.com/video.html">视频教程,已更新到第31集</a></li><li>
413 <a href="http://zhinengshe.com/contact.html">智能社联系方式</a></li></ul>
414 <h3 class="fastCom_title_r">
415 综合其他</h3>
416 </div>
417 </div>
418 <div class="main">
419 <div id="news" class="box">
420 <div class="h">
421 <h3>
422 新闻中心<span>News center</span></h3>
423 <a class="next" id="list_next" title="下一页" href="javascript:;"></a><a class="pre"
424 id="list_pre" title="上一页" href="javascript:;"></a>
425 </div>
426 <div class="c">
427 <ul class="list">
428 <li>
429 <div>
430 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[公告]关于2月2日公开课案例bug修复</a>
431 <span>2013-03-24</span>
432 </div>
433 </li>
434 <li>
435 <div>
436 <a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公开课已提供下载</a>
437 <span>2013-03-24</span>
438 </div>
439 </li>
440 <li>
441 <div>
442 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公开课</a>
443 <span>2013-03-24</span>
444 </div>
445 </li>
446 <li>
447 <div>
448 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社乔迁新址</a> <span>2013-03-24</span>
449 </div>
450 </li>
451 <li>
452 <div>
453 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">不会JavaScript能混前端么?</a>
454 <span>2013-03-24</span>
455 </div>
456 </li>
457 <li>
458 <div>
459 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公开课视频已提供下载</a>
460 <span>2013-03-24</span>
461 </div>
462 </li>
463 <li>
464 <div>
465 <a target="_blank" href="http://www.zhinengshe.com/news/26.html">论坛开放邀请注册了哦</a>
466 <span>2013-03-24</span>
467 </div>
468 </li>
469 </ul>
470 </div>
471 </div>
472 <div id="main_r" class="box">
473 <div class="h">
474 <h3>
475 热门课程<span>Hot course</span></h3>
476 </div>
477 <div class="c">
478 <ul>
479 <li><a href="javascript:;" class="js"></a>
480 <div>
481 精通JavaScript 2.0课程</div>
482 <div>
483 (适合具备XHTML+CSS基础的朋友)</div>
484 </li>
485 <li><a href="javascript:;" class="html"></a>
486 <div>
487 精通JavaScript 2.0课程</div>
488 <div>
489 (适合具备XHTML+CSS基础的朋友)</div>
490 </li>
491 <li><a href="javascript:;" class="css"></a>
492 <div>
493 精通JavaScript 2.0课程</div>
494 <div>
495 (适合具备XHTML+CSS基础的朋友)</div>
496 </li>
497 </ul>
498 </div>
499 </div>
500 </div>
501 </body>
502 </html>