初次接触web编程

起因

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

1

改动

添加了两行文字一个链接,几个效果,看起来与原模板没多大区别,对小白的挑战还是有难度的,首先html???css???更不谈模板使用的啥jquery了,别说了,先看index.html,开始

  • 看html源码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!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盒子与脚本函数。再认真一看,代码写得真易懂,等于我现在就是要自己加两个盒子和相配合的脚本函数(再把下面的东东去掉)

  • 先加盒子:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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语言知识,改:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <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
    2

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

感谢

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