起因
給博客折騰了一個上級網站主頁，在站長素材看見一個背景視差滾動模板，然後就魔改了一個自己的主頁，點擊訪問我的網站主頁源代碼（感謝互聯網）
手機端訪問沒有效果，見下圖效果：
改動
添加了兩行文字一個鏈接，幾個效果，看起來與原模板沒多大區別，對小白的挑戰還是有難度的，首先html？？？css？？？更不談模板使用的啥jquery了，別說了，先看index.html，開始
- 看html源碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery網頁背景視差滾動代碼 - 站長素材</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<style type="text/css">
body{ background-color:rgb(249, 249, 249);}
.box{ width:1100px; height:2000px; margin-left:auto; margin-right:auto; background-image:url('img/1.jpg'),url('img/2.jpg'),url('img/3.jpg'),url('img/4.jpg'); background-repeat:no-repeat; background-position:right 150px,left 500px,960px 800px,800px 100px;}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var top = $(this).scrollTop();
$(".box").css("backgroundPosition","right " + (150 + top*1.1) + "px,left " + (500 - top*0.00000000000001) + "px,960px " + (800 - top*1.3) + "px,800px " + (100 + top*1.8) + "px");
});
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗.</p>
<p>來源：<a href="http://sc.chinaz.com/" target="_blank">站長素材</a></p>
</div>
</body>
</html>
- 冷靜分析，瞎思考
以我對html啥啥的瞭解程度，結合百度，大概明白在文檔head裏面定義了樣式、body裏面有個box盒子與腳本函數。再認真一看，代碼寫得真易懂，等於我現在就是要自己加兩個盒子和相配合的腳本函數（再把下面的東東去掉） - 先加盒子：
<div class="box">
<div class="worda">
<h1>        你說，感動生活的是什麼，是絕處逢生還是平平淡淡</a></h1>
</div>
<div class="wordb">
<h1>  Welcome My Site！<span><a href="https://blog.skyqin1999.cn/" style="text-decoration:none" >blog</a></span>
</h1>
</div>
</div>
- 再加位置函數
不懂就先複製原函數，再琢磨着腦袋裏的c語言知識，改：
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var top = $(this).scrollTop();
if (top>381) //在顯示器上高度爲381時兩個大背景引號同一高度了，此時第一段文字跟隨左標點上升
{
$(".worda").css("margin-top",(500 + top*0.3) + "px"); //改自上面的原函數
$(".wordb").css("z-index",100); //把第二段文字置於頂層
$(".wordb").css("margin-top",(290 + top*0.9) + "px"); //讓第二段文字高度處於兩標點之間
}
else
{
$(".worda").css("margin-top",(290 + top*0.85) + "px"); //讓第一段文字高度處於兩標點之間
}
});
})
</script>
都這麼友好了，在自己的網頁上加上吧，就是css樣式加上html代碼，細細看前端還是蠻有趣的
感謝
感謝互聯網上的各類資源與教程，衷心感謝