视差背景html（修改自站长素材）

本文主要是介绍视差背景html（修改自站长素材），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

起因

给博客折腾了一个上级网站主页，在站长素材看见一个背景视差滚动模板，然后就魔改了一个自己的主页，点击访问我的网站主页源代码（感谢互联网）
手机端访问没有效果，见下图效果：

改动

添加了两行文字一个链接，几个效果，看起来与原模板没多大区别，对小白的挑战还是有难度的，首先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> &emsp; &emsp; &emsp;&emsp; 你说，感动生活的是什么，是绝处逢生还是平平淡淡</a></h1></div> <div class="wordb"><h1>  &emsp;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>