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

　　我们经常在一些网站上看到一些关于公司大事记、网站更新记录之类的页面，尤其现在的一些电子商务网站，来一个以时间线为轴，来标记一些重要日子进行一些大促之类的活动，有了这样一个直观的时间轴的东东，可以让来浏览网页的用户能很快捕捉到一些有用的信息。

　　那么我们可不可以把这个时间轴做的动感一点？然后我们可不可以把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;

}

　　欢迎批评指正！

posted @ 2013-09-03 17:30  九朗的码农生活  阅读(2277)  评论(0)  编辑  收藏  举报