jquery网页背景视差滚动代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery网页背景视差滚动代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)