首页 » 技术分享 » QQ空间时光轴特效

QQ空间时光轴特效

　
评论关闭　508次浏览

Index.html

<html>
<head>
    <meta charset="utf-8">
    <title>QQ空间时光轴效果</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<!-- 模版定义 -->
<div class="hide">
    <div id="tpl_scrubber_year">
        <a href="javascript:;" onclick="showYear({year},this)" class="s_year" id="scrubber_year_{year}">{year}
            {list}
        </a>
    </div>

    <div id="tpl_scrubber_month" >
        <a href="javascript:;" class="s_month {year}_month" onclick="showMonth({year},{month},this)" id="scrubber_month_{year}{month}" >{month}月</a>
    </div>

    <div id="tpl_content_year">

        <div class="c_year" id="content_year_{year}">{year}</div>
        {list}

    </div>

    <div id="tpl_content_month">

        <div class="c_item c_item_{leftOrRight} content_date_{year}{month} {isFirst}">

            <div class="c_i_icon_arrow"></div>
            <div class="c_i_icon_dot"><div class="c_i_icon_dot_child"></div></div>

            <div class="c_i_head">

                <div class="c_i_head_title">
                    <div class="c_i_head_title_icon">{lunar}</div>
                    {date}
                </div>
                <div class="c_i_head_intro">
                    <i class="ui_ico quote_before"></i>
                    {intro}
                    <i class="ui_ico quote_after"></i>
                </div>
            </div>
            <div class="c_i_media">
                {media}
            </div>
            <div class="c_i_footer">
                <div class="c_i_footer_info">
                    <a href="javascript:void(0)" class="op_zan" title="赞">
                        <i class="ui_ico ico_zan">赞</i>({like})</a>
                    <a href="javascript:void(0)" class="op_pin" title="评论">
                        <i class="ui_ico ico_com">评论</i>({comment})</a>
                </div>
                <div class="c_i_footer_like">
                    {like_format}人觉得很赞
                </div>
            </div>

        </div>

    </div>

</div>
<!--  网页内容 -->

<div class="top"></div>
<div class="header"></div>

<div class="container">



    <div class="scrubber" id="scrubber"> <!-- 时序列表 -->
        <!--
                    <a href="javascript:;" onclick="scroll(0)">现在</a>

                    <a href="javascript:;" onclick="showYear(2014,this)" class="s_year">2014
                        <a href="#" class="s_month 2014_month">3月</a>
                    </a>

                    <a href="javascript:;" onclick="showYear(2015,this)" class="s_year">2015
                        <a href="#" class="s_month 2015_month">3月</a>
                    </a>
        -->
    </div>


    <div class="content" id="content"> <!-- 内容 -->



    </div>
</div>

<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="fx.js"></script>
<script type="text/javascript" src="GetLunarDay.js"></script>
<script type="text/javascript" src="app.js"></script>

</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    margin: 0px;
    padding: 0;
    padding-top: 41px;
    background: url(images/1.jpg) #1c0c0f center 0 no-repeat fixed;
}

.top {
    width: 100%;
    top: 0px;
    height: 41px;
    background-color: #001E3B;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: 999;
}

.header {
    height: 200px;
    background-color: rgba(255, 255, 255, .2);
    width: 960px;
    margin: 0px auto;
}

.container {
    width: 960px;
    min-width: 960px;
    margin: 0px auto;
    position: relative;
}

.hide {
    display: none;
}

.clear {
    clear: both;
    height: 40px
}

.scrubber {
    position: absolute;
    top: 29px;
    left: 0px;
    width: 47px;
    z-index: 999
}

.scrubber a {
    height: 26px;
    line-height: 26px;
    padding-right: 5px;
    font-size: 12px;
    color: #a5a5a5;
    text-decoration: none;
    display: block;
    border-right: 2px solid #c8c8c8;
    border-right-color: rgba(200, 200, 200, .5);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    text-align: right;
}

.scrubber a:hover,
.scrubber a.cur {
    border-right-color: #7ebad0;
    color: #7ebad0;
    font-weight: bold;
}

.scrubber a:hover {
    text-decoration: underline;
}

.scrubber a.cur:hover {
    text-decoration: none;
}

.spine {
    display: block;
    width: 3px;
    height: 100%;
    background: #eee;
}

#scrubber .s_month {
    display: none;
}

.content {
    min-height: 1000px;
    padding-left: 160px;
    padding-top: 50px;
    background: url(images/spine.png) repeat-y 121px 0;
    position: relative;
}

.c_year {
    height: 30px;
    line-height: 30px;
    color: #a5a5a5;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    font-weight: bold;
    font-size: 14px;
    position: relative;
    left: -90px;
    clear: both;
}

.c_item {
    width: 370px;
    background: #fff;
    height: auto;
    margin: 20px 30px 0 0;
    position: relative;
    border-radius: 4px;
    color: #888;
}

.c_item_left {
    float: left;
}

.c_item_first {
    margin-top: -20px;
}

.c_item_right {
    float: right;
}

.c_item_right .c_i_icon_dot {
    left: -443px;
}

.c_i_icon_arrow {
    position: absolute;
    height: 0px;
    border-color: transparent #e2e2e2 transparent transparent;
    border-width: 10px 10px 10px 0;
    border-style: dashed solid dashed dashed;
    border-right-color: #fff;
    left: -10px;
    top: 20px;
}

.c_i_icon_dot {
    width: 11px;
    height: 11px;
    border-radius: 11px;
    position: absolute;
    left: -43px;
    top: 25px;
    background: #fff;
}

.c_i_icon_dot_child {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    position: absolute;
    left: 2px;
    top: 2px;
    background: #b3dae9;
}

.c_i_head {
    padding: 15px 15px 0px 15px;
}

.c_i_head_title {
    height: 46px;
    line-height: 46px;
    font-size: 28px;
    padding: 0px 0px 10px 56px;
    position: relative;
}

.c_i_head_intro {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 22px;
    padding: 0 15px;
}

.c_i_head_title_icon {
    width: 46px;
    height: 46px;
    background-color: #b3dae9;
    border-radius: 8px;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
    color: #fff;
    font-size: 27px;
    line-height: 23px;
}

.c_i_media {
    padding-bottom: 10px;
    height: 277px;
    overflow: hidden;
}

.c_i_footer {
    padding: 10px 15px;
    margin: 0px 15px;
    border-top: 1px solid #d6d6d6;
    font-size: 12px;
    color: #b2b2b2;
}

.c_i_footer_info {
}

.c_i_footer_info .ui_ico {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    visibility: visible;
}

.c_i_footer_like {
    line-height: 20px;
    padding-top: 5px;
}

.c_i_footer a {
    color: #b2b2b2;
    text-decoration: none;
    padding-right: 10px;
    display: inline-block;
    height: 20px;
}

.c_i_footer a:hover {
    color: #6EB8D3;
    text-decoration: underline;
}

.ui_ico, .ui_icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    background-repeat: no-repeat;
    font-size: 0;
    overflow: hidden;
}

.quote_after {
    vertical-align: bottom;
    background-image: url(images/timeline.png);
    background-position: -986px -102px;
    margin-left: 5px;
}

.quote_before {
    vertical-align: top;
    background-image: url(images/timeline.png);
    background-position: -986px -85px;
    margin-right: 5px;
}

.ico_zan {
    background-image: url(images/timeline.png);
    background-position: -883px -21px;
}

.ico_com {
    background-image: url(images/timeline.png);
    background-position: -897px -42px;
}

data.js

var data = [];
data.push({
    'date'  : '2016-12-1',
    'intro' : '我要这天，再遮不住我眼，要这地，再埋不了我心，要这众生，都明白我意，要那诸佛，都烟消云散! ',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 35038,
    'comment' : 817
})

data.push({
    'date'  : '2016-11-30',
    'intro' : '金钱可以使人卑微，也可以使人卑贱，可以使人高傲，却无法使人高贵。',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 35038,
    'comment' : 817
})


data.push({
    'date'  : '2016-7-31',
    'intro' : '在这春林初盛，草长莺飞的日子，QQ空间愿你关掉电脑，放下手机，与三五好友相约青山绿水中，感受春天带来的勃勃生机···',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 302,
    'comment' : 883
})

data.push({
    'date'  : '2016-3-31',
    'intro' : '在这个世界上，一部分人选择看到丑恶与混乱， 但我选择看到美好的一面。···',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 302,
    'comment' : 883
})



data.push({
    'date'  : '2016-3-30',
    'intro' : 'You can\'t just sit there and wait for life to come to you. You have to go get it. - 你不能无所事事的坐等人生带给你一切，你必须得自己努力争取。',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 35038,
    'comment' : 817
})

data.push({
    'date'  : '2015-3-30',
    'intro' : '原来一生一世那么短暂，原来当你发现所爱的，就应该不顾一切的去追求。因为生命随时都会终止，命运是大海，当你能够畅游时，你就要尽情游向你的所爱，因为你不知道狂流什么时候会到来，卷走一切希望与梦想。',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2015-3-28',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2014-2-28',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2014-2-27',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2014-2-26',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2014-2-02',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 238,
    'comment' : 417
})
data.push({
    'date'  : '2014-2-01',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})




data.push({
    'date'  : '2013-3-31',
    'intro' : '在这春林初盛，草长莺飞的日子，QQ空间愿你关掉电脑，放下手机，与三五好友相约青山绿水中，感受春天带来的勃勃生机···',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 32102,
    'comment' : 883
})


data.push({
    'date'  : '2013-3-30',
    'intro' : '腾讯视频年度大戏，陈冠希复出之作——《探灵档案》灵异上映。一起看陈老师怎么在QQ空间里抽丝剥茧，最终破案的吧>><a href="#">http://url.cn/MbxmrY</a>',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 35038,
    'comment' : 817
})

data.push({
    'date'  : '2013-3-30',
    'intro' : '咱们Qzone有福利！即日起，在QQ空间预约《逆战》最新资料片，就能100%获得丰厚游戏大礼包——还有iPad mini、雷蛇键鼠套装等实物大奖等你来拿！还等什么？马上预约吧',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2013-3-28',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2013-2-28',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="http://b248.photo.store.qq.com/psb?/eabfd933-2c89-47cc-8138-5b5463dab9e9/6prIkorOKpH.kDZWn*IhPw3v9NTSHwx3ZdRehBPs6X4!/b/dH6R3JOrDwAA&bo=gAJeA50ENwYBAFA!" width="370">',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2013-2-27',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2013-2-26',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

data.push({
    'date'  : '2013-2-02',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})
data.push({
    'date'  : '2013-2-01',
    'intro' : '3月27日晚12点，QQ音乐年度盛典完美谢幕。这是一场由大数据决定的“巅峰对决”，5500万人次投票，265万人次观看在线直播——每一个数据都由你组成。#乐动你我，无处不乐#',
    'media' : '<img src="images/psb.jpeg" width="370" >',
    'like' : 25038,
    'comment' : 417
})

app.js



//var data=require('data');


//--------  公共函数


var g = function(id){ return document.getElementById(id);}

var getBodyW = function(){ return document.body.offsetWidth; };

var getBodyH = function(){ return document.body.offsetHeight; };

var getElTop = function(el){ return el.offsetTop+170; };


//--------  模版内容输出


//  分析归类数据

var list = {};  //  { year: { month : [ item ,item ] } }


data.sort(function(a,b){

    return new Date(a.date).getTime() > new Date(b.date).getTime();

})


//  格式化数据

for (var i = data.length - 1; i >= 0; i--) {


    var date = new Date(data[i].date);

    var year  = date.getFullYear();

    var month = date.getMonth()+1;

    var lunar = GetLunarDateString( date );


    if( !list[year] ){ list[year] = {}; }

    if( !list[year][month] ){ list[year][month] = []; }


    var item = data[i];

    item.lunar = lunar[0]+'<br>&nbsp;&nbsp;&nbsp;'+lunar[1];

    item.like_format = item.like < 10000 ? item.like : ( item.like / 10000 ).toFixed(1) + '万';


    list[year][month].push( item );

};


转载自原文链接, 如需删除请联系管理员。 


原文链接：QQ空间时光轴特效，转载请注明来源！
				

		

    			赞 
        0