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

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

  那么我们可不可以把这个时间轴做的动感一点?然后我们可不可以把PC上这么好玩的时间轴移植到移动网页上呢?答案当然是可以的。稍后我把代码送出来。

  先来看一张截图吧,这是我最终实现之后的页面样式,因为不会截图,也没有专业的视觉设计师,所以页面的视觉风格是借鉴了别人的:

  给你的移动网站加点料:时间轴的实现方案_第1张图片

  线上演示地址:http://sandbox.runjs.cn/show/phvofu0c

  你也可以拿出你的手机扫描下面的二维码访问示例页面:

  给你的移动网站加点料:时间轴的实现方案_第2张图片

  如果看到以上在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>TimeLinetitle>
    <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>2013span>h3>
                    <dl class="right">
                        <span>时间轴就要成功了!span>
                      dl>
                li>
                <li>
                    <h3>08.15<span>2013span>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>2012span>h3>
                    <dl class="right">
                        <span>那一年的今天!span>
                      dl>
                li>
                <li>
                    <h3>08.15<span>2012span>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;

}
复制代码

  欢迎批评指正!

你可能感兴趣的:(移动网站开发,移动网站,时间轴,移动Web)