为什么不是't我的Parallax滚动JavaScript代码正在工作

Why isn't my Parallax scrolling JavaScript code working?

本文关键字：JavaScript 滚动 代码 工作 Parallax 我的 为什么不      更新时间：2023-09-26

我开始设计自己的网站，并在YouTube上观看了一个关于如何使用JavaScript和CSS在Dreamweaver上编写Motion Parallax滚动代码的视频教程，所以我观看了视频并完成了它告诉我的一切，但我的代码仍然不起作用？

https://www.youtube.com/watch?v=cF3oyFXjRWk

我觉得我的JavaScript代码没有链接或其他什么，因为视频中以特定颜色突出显示的一些语法或变量没有为我突出显示。我的问题可能是什么？

我也把JavaScript放在了head标签中。。。这是.js代码

<script type="text/javascript">
    var ypos, image;
    function parallex () {
        ypos = window.pageYOffset;
        image = document.getElementById('background');
        image.style.top = ypos * .4 + 'px';
    }
    window.addEventListener('scroll', parallex);
    </script>

这也是我所有的css代码。。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../Tezel's Website/css/bootstrap.min.css" rel="stylesheet">


    <style type="text/css">
    *{
    margin: 0px;
    padding: 0px;
    }
    #image{
        position: relative; 
        z-index: -1
    }

    #content{
        height: 750px; 
        width: 100%;
        margin-top: -10px;
        background-color:#4dbbac;
        position: relative; 
        z-index: 1; 
    }
    </style>

 <script type="text/javascript">
    var ypos, image;
    function parallex () {
        ypos = window.pageYOffset;
        image = document.getElementById('background');
        image.style.top = ypos * .4 + 'px';
    }
    window.addEventListener('scroll', parallex);
    </script>

  </head>

  <body>


  <img id = "background" src = "sky1.jpg" width = "100%" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../Tezel's Website/js/bootstrap.min.js"></script>

    <div class = "main">
    <div id = "container">
    <div class = "header">


    <div id = "content"> 
    </div> 


    </div>
    </div>    
    </div>

  </body>
</html>

这看起来不太迷人：

<script src="../Tezel's Website/js/bootstrap.min.js"></script>

检查是否已加载所有资源。在浏览器中单击鼠标右键并检查图元或检查图元。确保找到并加载了所有资源。

相关文章：