给你的移动网站加点料:时间轴的实现方案

发布时间:2016-12-7 5:49:02 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"给你的移动网站加点料:时间轴的实现方案",主要涉及到给你的移动网站加点料:时间轴的实现方案方面的内容,对于给你的移动网站加点料:时间轴的实现方案感兴趣的同学可以参考一下。

我们经常在一些网站上看到一些关于公司大事记、网站更新记录之类的页面,尤其现在的一些电子商务网站,来一个以时间线为轴,来标记一些重要日子进行一些大促之类的活动,有了这样一个直观的时间轴的东东,可以让来浏览网页的用户能很快捕捉到一些有用的信息。   那么我们可不可以把这个时间轴做的动感一点?然后我们可不可以把PC上这么好玩的时间轴移植到移动网页上呢?答案当然是可以的。稍后我把代码送出来。   先来看一张截图吧,这是我最终实现之后的页面样式,因为不会截图,也没有专业的视觉设计师,所以页面的视觉风格是借鉴了别人的:      线上演示地址:http://sandbox.runjs.cn/show/phvofu0c   你也可以拿出你的手机扫描下面的二维码访问示例页面:      如果看到以上在PC和手机上的演示之后,你有兴趣的话,就可以接下来看看我的代码了,老规矩,代码全部奉送!   timeline.html   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <title>TimeLine</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <link href="timeline.css" rel="stylesheet"> <script language="javascript"> $(function(){ $(".timeline").eq(0).animate({ height:'600px' },1500); }); </script> </head> <body> <div class="timeline"> <div class="timeline-date"> <ul> <h2 class="second" style="position: relative;"> <span>2013年</span> </h2> <li> <h3>09.03<span>2013</span></h3> <dl class="right"> <span>时间轴就要成功了!</span> </dl> </li> <li> <h3>08.15<span>2013</span></h3> <dl class="right"> <span>为了时间轴奋斗吧!</span> </dl> </li> </ul> </div> <div class="timeline-date"> <ul> <h2 class="second" style="position: relative;"> <span>2012年</span> </h2> <li> <h3>09.03<span>2012</span></h3> <dl class="right"> <span>那一年的今天!</span> </dl> </li> <li> <h3>08.15<span>2012</span></h3> <dl class="right"> <span>前端之路慢慢修远!</span> </dl> </li> </ul> </div> </div> </body> </html>   timeline.css body,h2,ul,h3 {padding: 0;margin: 0;} ul {list-style: none outside none;} .timeline { background: url("images/line4.png") repeat-y 50px 0; overflow: hidden; position: relative; height:100px; margin: 20px 10px; } .timeline-date { overflow: hidden; position: relative; } .timeline-date h2 { background:url("images/icon9.png") no-repeat 10px 0; height: 87px; margin-bottom: 20px; } .timeline-date h2 span { color: #999999; display: inline-block; font-size: 22px; margin: 30px 0px 0 110px; } .timeline-date ul li { background: url("images/icon7.png") no-repeat 42px 5px; zoom: 1; height:70px; } .timeline-date ul li h3 { float: left; text-align: right; font-size: 14px; color: #878787; display: block; } .timeline-date ul li h3 span { display: block; color: #ADADAD; font-size: 12px; padding-left:15px; } .timeline-date ul li dl { margin-top: -5px; } .timeline-date ul li dl.right { background: url("images/left_arrow.png") no-repeat 0 0; float: left; margin-left: 35px; margin-top: -5px; display: block; background-color:#FFBB42; height:40px; width:216px; } .timeline-date ul li dl span{ display: block; font-size:16px; padding: 0px 10px 0px 30px; color:#fff; line-height: 40px; }   欢迎批评指正!

上一篇:LoadRunner数据库监控指标
下一篇:GIS空间索引(3)--R树索引

相关文章

相关评论