起因
给博客折腾了一个上级网站主页，在站长素材看见一个背景视差滚动模板，然后就魔改了一个自己的主页，点击访问我的网站主页源代码（感谢互联网）
手机端访问没有效果，见下图效果：
改动
添加了两行文字一个链接，几个效果，看起来与原模板没多大区别，对小白的挑战还是有难度的，首先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>- 调整位置，再来点花里胡哨
说实话，位置要慢慢调，完事儿后，看到github榜单有个css拷贝项目（日常Ctrl cv来了），点进去官方，发现东西不多，但是对我这种小白，嘿嘿嘿，copy
都这么友好了，在自己的网页上加上吧，就是css样式加上html代码，细细看前端还是蛮有趣的
感谢
感谢互联网上的各类资源与教程，衷心感谢
