效果圖:
以后再補充吧 還是不能上傳圖片
效果上實現(xiàn)了無線滾動
效果圖

1：css部分 <style type="text/css">*{margin:0;padding:0;}/*要讓背景圖平鋪*/body{font-size:12px;font-family:"微軟雅黑";background:url("306682.jpg")top center;}.timeline{width:1100px;margin:0 auto;position:relative;}.timeline .t_line{width:5px;height:1500px;background:#ccc;position:absolute;left:200px;top:50px;}.timeline .t_all{width:1100px;position:absolute;}/*讓整體往右移動 偏移到時光軸的線上*/.timeline .t_all .list{margin:70px 0 0 167px;float:left;}.timeline .t_all .list .icon{width:66px;height:66px;float:left;}/*讓頭像變圓角*/.timeline .t_all .list .icon img{border-radius:50%;}/*.timeline .t_all .list .sj{width:13px;height:16px;background:url("5.jpg") no-repeat;}*/.timeline .t_all .list .msg{width:500px;background:#fff;float:left;margin-left:20px;border-radius:5px;font-size:14px;padding:16px;}</style> 2:html部分<div class="timeline"><!-- 軸線 --><div class="t_line"></div><!-- 內(nèi)容 --><div class="t_all"><!-- list start --><div class="list animated shake"><div class="icon"><img src="8.jpg" width="66" height="66" border="0" alt="基努里維斯" border="0"></div><!-- <div class="sj"></div>--><div class="msg"> 尼歐，你終于來了!我一直在等你!</div></div><!-- list end --><!-- list start --><div class="list animated shake"><div class="icon"><img src="6.jpg" width="66" height="66" border="0" alt="基努里維斯" border="0"></div><!-- <div class="sj"></div>--><div class="msg">為什么我會來到這里?這一切究竟是為了什么?</div></div><!-- list end --><!-- list start --><div class="list animated shake"><div class="icon"><img src="8.jpg" width="66" height="66" border="0" alt="基努里維斯" border="0"></div><!-- <div class="sj"></div>--><div class="msg">我知道你的意思。讓我來告訴你，你為什么會來這里。你來這里是因為你領(lǐng)悟了某種東西。某種你無法解釋的東西。但是你能感覺到它。這種感覺伴隨著你的整個人生。這個世界一定有什么地方不對勁，盡管你說不上來，但它一定存在，這種感覺就像心頭的一根刺，讓你寢食難安。就是這種感覺，把你帶到了我這里來。你知道我在說什么嗎？</div></div><!-- list end --><!-- list start --><div class="list animated shake"><div class="icon"><img src="6.jpg" width="66" height="66" border="0" alt="基努里維斯" border="0"></div><!-- <div class="sj"></div>--><div class="msg">我不知道自己究竟是在做夢還是醒著!墨菲斯給了我兩粒藥丸,我吞下了藍色藥丸,然后見到了真實世界,一個在martix之外的世界！<img src="9.jpg" width="400" height="242" border="0" alt=""></div></div><!-- list end --><!-- list start --><div class="list animated shake"><div class="icon"><img src="8.jpg" width="66" height="66" border="0" alt="基努里維斯" border="0"></div><!-- <div class="sj"></div>--><div class="msg">真相就是，你是個奴隸，Neo。跟別人一樣，你一生下來，就被囚禁在一個沒有知覺的牢籠。你想知道它究竟是什么嗎？母體無處不在。它就在我們周圍，即使是在這個小小的房間里。當(dāng)你望向窗外，或者打開電視，你就能看到它。你上班的時候能感覺到它，你去教堂的時候能感覺到它，你納稅時也一樣。它就是那個蒙蔽你雙眼，讓你無法看到真相的世界。</div></div><!-- list end --></div></div> 3:js部分 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><script type="text/javascript">//滾動條的高度var scrollHeight = 0;//滾動條距離頂部的高度var scrollTop = 0; var html = "";var flag = false;$(function(){var height = $(window).height();$(window).scroll(function(){scrollHeight = document.body.scrollHeight;scrollTop = document.body.scrollTop;if(scrollTop + height >= scrollHeight){if(!flag){html = $(".t_all").html();}$(".t_all").append(html);//時光軸的高度初始化$(".t_line").height(document.body.scrollHeight);flag = true;}});})</script>

總結(jié)

以上是生活随笔為你收集整理的qq空间时光轴效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。