qq空間時光軸效果
阿新 • • 發佈:2018-11-03
效果圖:
以後再補充吧 還是不能上傳圖片
效果上實現了無線滾動
效果圖
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:5 px;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>
<!-- 內容 -->
<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">
我知道你的意思。讓我來告訴你,你為什麼會來這裡。你來這裡是因為你領悟了某種東西。某種你無法解釋的東西。但是你能感覺到它。這種感覺伴隨著你的整個人生。這個世界一定有什麼地方不對勁,儘管你說不上來,但它一定存在,這種感覺就像心頭的一根刺,讓你寢食難安。就是這種感覺,把你帶到了我這裡來。你知道我在說什麼嗎?
</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。跟別人一樣,你一生下來,就被囚禁在一個沒有知覺的牢籠。
你想知道它究竟是什麼嗎?母體無處不在。它就在我們周圍,即使是在這個小小的房間裡。當你望向窗外,或者開啟電視,你就能看到它。你上班的時候能感覺到它,你去教堂的時候能感覺到它,你納稅時也一樣。它就是那個矇蔽你雙眼,讓你無法看到真相的世界。
</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>