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

最新推荐文章于 2022-02-12 15:30:50 发布

微型可乐瓶

最新推荐文章于 2022-02-12 15:30:50 发布

阅读量461

点赞数

分类专栏：博客

本文链接：https://blog.csdn.net/Sly_Qin/article/details/90114229

版权

博客专栏收录该内容

4 篇文章 0 订阅

订阅专栏

起因

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

改动

添加了两行文字一个链接，几个效果，看起来与原模板没多大区别，对小白的挑战还是有难度的，首先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>

调整位置，再来点花里胡哨
说实话，位置要慢慢调，完事儿后，看到github榜单有个css拷贝项目（日常Ctrl cv来了），点进去官方，发现东西不多，但是对我这种小白，嘿嘿嘿，copy

都这么友好了，在自己的网页上加上吧，就是css样式加上html代码，细细看前端还是蛮有趣的

感谢

感谢互联网上的各类资源与教程，衷心感谢

微型可乐瓶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
视差背景html（修改自站长素材）

起因给博客折腾了一个上级网站主页，在站长素材看见一个背景视差滚动模板，然后就魔改了一个自己的主页，点击访问我的网站主页源代码（感谢互联网）手机端访问没有效果，见下图效果：改动添加了两行文字一个链接，几个效果，看起来与原模板没多大区别，对小白的挑战还是有难度的，首先html？？？css？？？更不谈模板使用的啥jquery了，别说了，先看index.html，开始看html源码&lt...
复制链接

扫一扫