jQuery仿QQ空间时间轴动画特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿QQ空间时间轴动画特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>QQ空间时光轴</title>
</head>
<body>
    <template>
        <article>
            <i></i>
            <span class="nular">{{lunar}}</span><b class="secDate">{{date}}</b>
            <p class="content">"{{content}}"</p>{{img}}
            <a href="#" title="赞" class="like">（{{like}}人）已赞</a>
            <a href="#" title="评论" class="comment">（{{comment}}）人已评论</a>
            <p class="verylike">{{veryLike}}人觉得很赞</p>
        </article>
    </template>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="menu-nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><i class="logo"></i></a>
            </div>
            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">
                    <li class=" one"><i class="ui-center"></i><a href="#">个人中心</a></li>
                    <li class="two"><i class="ui-home"></i><a href="#">我的主页</a></li>
                    <li class="three"><i class="ui-friends"></i><a href="#">好友</a></li>
                    <li class="four"><i class="ui-apply"></i><a href="#">应用</a></li>
                    <li class="five"><i class="ui-dress"></i><a href="#">装扮</a></li>
                    <li class="six"><i class="ui-music"></i><a href="#" class="music-active"></a></li>
                    <li class="seven"> <input type="text" class="form-control" placeholder="用户/应用/动态"><span class="search"></span></li>
                    <li class="eight"><img src="img/touxiang.png" alt="">&nbsp;&nbsp;用&nbsp;户&nbsp;名&nbsp;~&nbsp;~</li>
                </ul>
            </div>
        </div>
    </nav>
    <main>
        <div class="container">
            <aside></aside>
            <section></section>
        </div>

    </main>
    <footer>
        <div class="container">
            <div class="row up">
                <ul class="list-inline text-center">
                    <li>空间手机版</li>
                    <li>黄钻贵族</li>
                    <li>官方Qzone</li>
                    <li>QQ互联</li>
                    <li>认证服务</li>
                    <li>腾讯博客</li>
                    <li>QQ空间服务协议</li>
                    <li>Complaint Guidelines</li>
                    <li>粤网文献</li>
                </ul>
            </div>
            <div class="row mid">
                <ul class="list-inline text-center"></ul>
            </div>
        </div>
    </footer>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/data.js"></script>
    <script src="js/GetLunarDay.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

/** * Created by a313 on 2016/5/23. */
data.sort(function (a,b){
	return new Date(b.date).getTime() - new Date(a.date).getTime();
}
);
	var list ={
}
;
	for (var i = 0;
	i < data.length;
	i++){
	var date = new Date(data[i].date);
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	//console.log(month);
	if (!list[year]){
	list[year] ={
}
;
}
if (!list[year][month]) list[year][month] = [];
	var item = data[i];
	var lunar = GetLunarDateString(date);
	lunar = lunar[0] + "<br>&nbsp;
	&nbsp;
	&nbsp;
	&nbsp;
	" + lunar[1];
	//console.log(lunar);
	item.lunar = lunar;
	item.veryLike = data[i].like < 10000 ? data[i].like:(data[i].like / 10000).toFixed(1) + "万";
	list[year][month].push(item);
}
//console.log(list);
	//动态组装左边的侧边栏的年月var html = [];
	var aside = document.querySelector("main aside");
	for (year in list){
	html.unshift("</dl>");
	//前插数组元素，成为降序排序 for (month in list[year]){
	html.unshift("<dd class='month'>" + month + "月</dd>");
}
html.unshift("<dl><dt class='year'>" + year + "年</dt>");
}
//console.log(html);
	aside.innerHTML = html.join("");
	//console.log(aside.innerHTML);
	//动态组装section的内容var section = document.querySelector("main section");
	var artHtml;
	var temHtml = document.querySelector("template").innerHTML;
	//获取模板的内部html = [];
	for (year in list){
	html.unshift("</dl>");
	for (month in list[year]){
	html.unshift("</dd>");
	artHtml = "";
	for (i = 0;
	i < list[year][month].length;
	i++){
	artHtml += temHtml.replace("{
	{
	lunar}
}
",list[year][month][i].lunar).replace("{
	{
	date}
}
",list[year][month][i].date).replace("{
	{
	content}
}
",list[year][month][i].intro).replace("{
	{
	img}
}
",list[year][month][i].media).replace("{
	{
	like}
}
",list[year][month][i].like).replace("{
	{
	comment}
}
",list[year][month][i].comment).replace("{
	{
	veryLike}
}
",list[year][month][i].veryLike);
}
html.unshift(artHtml);
	html.unshift("<dd><span class='title'>" + month + "月</span>");
}
html.unshift("<dl class='year'><dt >" + year + "年</dt>");
}
section.innerHTML = html.join("");
	//console.log(section.innerHTML);
	//获取年份，实现滚动监控并显示当前年份的样式var sectionYears = section.querySelectorAll("dl");
	var asideYears = aside.querySelectorAll("dl");
	var asideMonthAll=aside.querySelectorAll("dd");
	var sectionMonthAll=section.querySelectorAll("dd");
	//console.log(sectionYears);
	//获取对象纵坐标function getTop(els){
	if (els){
	var top = els.offsetTop;
	while (els = els.offsetParent){
	top += els.offsetTop;
}
return top;
}
}
//清除年份和月份的on和active类名function clearClass(){
	for (var i = 0;
	i < asideYears.length;
	i++){
	if (asideYears[i].classList.contains("on")){
	asideYears[i].classList.remove("on");
	//清除年份的class名on var mouthAll = asideYears[i].querySelectorAll("dd.month");
	for (var j = 0;
	j < mouthAll.length;
	j++){
	if (mouthAll[j].classList.contains("active")){
	mouthAll[j].classList.remove("active");
	break;
}
}
break;
}
}
}
asideYears[0].classList.add("on");
	window.onscroll = function (){
	var scrollTop = document.body.scrollTop;
	//处理aside让它先滚动后固定 if (scrollTop > 250){
	aside.style.position = "fixed";
	aside.style.top = "-60px";
}
else{
	aside.style.position = "absolute";
	aside.style.top = "200px";
}
for (i = 0;
	i < sectionYears.length;
	i++){
	if (scrollTop < getTop(sectionYears[i]) - 300) break;
}
//清除类名 clearClass();
	asideYears[i - 1].classList.add("on");
	var asideMonths=asideYears[i - 1].querySelectorAll("dd");
	var sectionMonths= sectionYears[i -1].querySelectorAll("dd");
	for (i = 0;
	i < sectionMonths.length;
	i++){
	if (scrollTop < getTop(sectionMonths[i]) - 300) break;
}
asideMonths[i-1].classList.add("active");
}
;
	//aside的滚动监控和点击动画//动画卷动函数var animated=true;
	function scrollAnimation(end){
	if (animated){
	animated=false;
	var start = document.body.scrollTop || document.documentElement.scrollTop;
	var timer = setInterval(function (){
	if (start != end){
	start += (end > start) ? Math.ceil((end - start) / 10):Math.floor((end - start) / 10);
	window.scroll(0,start);
}
else{
	clearInterval(timer);
	animated=true;
}
}
,10);
}
}
//给年加上索引坐标，通过索引来找到它for(i=0;
	i<asideYears.length;
	i++){
	asideYears[i].index=i;
	// console.log(asideYears[i].index);
}
//给月加上索引坐标，通过索引来找到它for(i=0;
	i<asideMonthAll.length;
	i++){
	asideMonthAll[i].index=i;
}
aside.onclick=function(e){
	e=e||window.event;
	eTarget= e.target|| e.srcElement;
	if(eTarget.classList.contains("year")){
	var dlYear=eTarget.parentNode;
	var index=dlYear.index;
	console.log(eTarget);
	scrollAnimation(getTop(sectionYears[index])-85);
	//找到当前年上面的部分冒出去的距离再减去导航条的高度}
else if(eTarget.classList.contains("month")){
	index=eTarget.index;
	scrollAnimation(getTop(sectionMonthAll[index])-85);
}
}
;

CSS代码(index.css):

@charset "utf-8";body{padding-top:150px;background:url("../img/qqBg1.png") center 0 no-repeat fixed;}
template{display:none;}
nav{opacity:0.7;z-index:1000;}
nav div.container div.navbar-header a{line-height:35px;}
nav div.container div.navbar-header a i.logo{display:inline-block;width:30px;height:35px;background-image:url("../img/icon.png");}
nav div.container ul li{margin-right:20px;}
nav div.container ul li i{display:inline-block;background-image:url("../img/icon1.png");width:25px;height:25px;margin-right:-15px;}
nav div.container ul li i.ui-center{background-position-x:260px;background-position-y:225px;}
nav div.container ul li i.ui-home{background-position-x:157px;background-position-y:199px;}
nav div.container ul li i.ui-friends{background-position-x:260px;background-position-y:278px;}
nav div.container ul li i.ui-apply{background-position-x:105px;background-position-y:304px;}
nav div.container ul li i.ui-dress{background-position-x:155px;background-position-y:147px;}
nav div.container ul li i.ui-music{background-position-x:161px;background-position-y:95px;background-color:#D18B00;width:30px;height:30px;border-right:1px solid #eee;}
nav div.container ul li.one a{display:inline-block;line-height:50px;font-family:"Adobe Caslon Pro";font-size:18px;font-weight:600;color:#EF9618;}
nav div.container ul li.two a{display:inline-block;line-height:50px;font-family:"Adobe Caslon Pro";font-size:18px;font-weight:600;color:#0986E2;}
nav div.container ul li.three a{display:inline-block;line-height:50px;font-family:"Adobe Caslon Pro";font-size:18px;font-weight:600;color:#E34200;}
nav div.container ul li.four a{display:inline-block;line-height:50px;font-family:"Adobe Caslon Pro";font-size:18px;font-weight:600;color:#00974A;}
nav div.container ul li.five a{display:inline-block;line-height:50px;font-family:"Adobe Caslon Pro";font-size:18px;font-weight:600;color:#3E207A;}
nav div.container ul li.six a.music-active{display:inline-block;background-image:url("../img/2-music-sonic.gif");background-color:#D18B00;background-repeat:no-repeat;background-origin:content-box;background-position:center;width:25px;height:20px;margin-left:15px;margin-top:20px;cursor:pointer;}
nav div.container ul li.seven{margin-top:20px;margin-left:20px;}
nav div.container ul li.seven span.search{position:absolute;width:20px;height:20px;background-image:url("../img/search3.png");background-repeat:no-repeat;left:85%;top:10px;}
nav div.container ul li.eight{margin-top:22px;font-size:14px;font-weight:600;color:#3E207A;margin-left:30px;}
main aside{border-right:3px solid #796B69;display:inline-block;position:absolute;padding-right:10px;margin-top:160px;margin-left:20px;opacity:.5;}
main aside dl dt{text-align:right;}
main aside dl.on dt{padding-right:8px;border-right:3px solid #DCAB4A;margin-right:-13px;color:#DCAB4A;}
main aside dl dd{display:none;text-align:right;margin-right:-13px;border-right:3px solid #796B69;padding-right:5px;}
main aside dl dd:hover,main aside dl dd.active{border-right:3px solid blue;margin-right:-12.5px;color:blue;}
main aside dl.on dd{display:block;}
main section{margin-left:150px;border-left:5px solid #c8c8c8;padding-left:40px;}
main section:before{content:"";position:absolute;width:115px;height:140px;background-image:url("../img/user.png");margin-left:-155px;}
main section dl{background-color:#f5f5f5;border-radius:5px;}
main section dl dt{position:absolute;margin-left:-110px;}
main section dl dd span{display:inline-block;vertical-align:middle;}
main section dl dd span:first-child{position:absolute;margin-left:-86px;margin-top:25px;}
main section dl dd span.nular{display:inline-block;background-color:#B0E9F5;width:50px;height:60px;border-radius:8px;color:#fff;font-size:21px;margin-left:20px;margin-top:20px;}
main section dl dd b.secDate{font-size:28px;color:#b1b1b1;font-weight:normal;margin-left:20px;position:absolute;margin-top:25px;}
main section dl dd p.content{margin-left:20px;margin-top:20px;color:#bcbcbc;margin-right:20px;}
main section dl dd img{display:block;width:698px;margin-left:20px;margin-top:30px;}
main section dl dd a.like{margin-left:40px;margin-top:20px;display:inline-block;color:#bdbdbd;}
main section dl dd a.like:before{content:'';width:25px;height:30px;position:absolute;background:url("../img/like.png");margin-left:-20px;margin-top:-5px;}
main section dl dd a.comment{margin-left:60px;color:#bdbdbd;}
main section dl dd a.comment:before{content:'';width:25px;height:30px;position:absolute;background:url("../img/comment.png");margin-left:-20px;margin-top:15px;}
main section dl dd p.verylike{margin-left:50px;margin-top:20px;display:inline-block;position:absolute;font-size:16px;color:#bdbdbd;}
main section article{margin-bottom:30px;}
main section article i{width:20px;height:20px;border-radius:50%;display:inline-block;position:absolute;border:5px solid #cff5f9;background-color:#eee;margin-left:-52px;z-index:100;margin-top:15px;}
main section article:before{content:'';width:30px;height:30px;display:inline-block;position:absolute;transform:rotate(45deg);margin-left:-15px;margin-top:10px;background-color:#ddd;z-index:-1000;}
footer{margin-top:70px;}
footer a{color:#fff;}
footer div.container{background-color:#5aaaaa;opacity:.5;}
footer div.container div.up ul{margin-top:20px;font-size:12px;font-weight:600;color:#fff;}
footer div.container div.up ul li{padding-right:8px;}
footer div.container div.up ul li:not(:last-child):after{content:"|";color:#fff;padding:0 0 0 10px;}
footer div.container div.mid{font-size:14px;}
footer div.container div.mid ul li{padding:0;color:#fff;}
footer div.container div.down{font-size:13px;}
footer div.container div.down ul li{color:#fff;padding:0;}
footer div.container div.down ul li:last-child:before{content:"|";color:#fff;padding:0 10px;}
@media (min-width:320px) and (max-width:767px){nav div.container form{display:none;}
nav div.container ul{text-align:center;}
}
@media (min-width:320px) and (max-width:992px){nav div.container ul li{margin-right:20px;}
nav div.container ul li i{display:inline-block;background-image:url("../img/icon1.png");width:25px;height:25px;margin-right:-15px;}
nav div.container ul li.seven{display:none;}
nav div.container ul li.eight{display:none;}
}
@media (min-width:768px) and (max-width:993px){nav div.container ul li{margin-right:20px;}
nav div.container ul li i{display:inline-block;background-image:url("../img/icon1.png");width:25px;height:25px;margin-right:-15px;}
nav div.container ul li.seven{margin-top:20px;}
}
@media (min-width:994px) and (max-width:1200px){nav div.container ul li.eight{display:none;}
}
@media (min-width:1201px){main section{margin-left:160px;}
main section dl dd span.nular{margin-left:60px;margin-top:20px;}
main section dl dd p.content{margin-left:60px;}
main section dl dd img{margin-left:60px;width:780px;}
main section dl dd a.like{margin-left:80px;}
main section:before{background-image:url("../img/user.png");/*left:173px;*/
}
}

附件:下载该文件资源,减少时间成本(增值服务)