我开始设计自己的网站，并按照 YouTube 视频教程学习如何使用 JavaScript 和 CSS 在 Dreamweaver 上编写运动视差滚动代码，因此我按照视频进行操作，并执行了它告诉我的所有操作，但我的代码仍然无法正常工作？
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>
检查是否所有资源都已加载。右键单击并检查元素或检查浏览器中的元素。确保找到并加载所有资源。
关于javascript - 为什么我的视差滚动 JavaScript 代码不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33976260/