我目前正在制作一个作品集，并尝试离线编写网站代码。 我想让图像在使用 jQuery 滚动时淡出。
但是，我认为我的 JScript 还不错(我是新手，但看起来不错)。 我认为问题是我错误地链接到了 jQuery。
有没有办法找出问题出在以下哪一项:
- 我的 Jscript 有问题
- 我错误地链接了 jQuery
$(document).ready(function() {});
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
$('.img-src_clean').css({
'opacity': ((height - scrollTop) / height)
});
});.blurred-container {
position: relative;
width: 100%;
height: 450px;
top: 0;
left: 0;
}
.img-src_clean {
width:100%;
height: 450px;
background-image: url('http://imgur.com/w0wLfaF.jpg');
background-size: cover;
background-position: center center;
}
.img-src_blur {
width:100%;
height: 450px;
background-image: url('http://imgur.com/MRD3m2q.jpg');
background-size: cover;
background-position: center center;
opacity: 0;
}<!-- That's the head -->
<!-- Place for JS Scripts -->
<script src="Javascript.js"></script> <!-- Are these two script links right? -->
<script src="jQuery.min.js"></script>
<!-- Here ends the head-->
<!-- Here begins the <body> -->
<div class="blurred-container">
<div class="img-src_clean"></div> <!-- That's where my JScript should attack-->
<div class="img-src_blur"></div>
</div>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>希望不要太乱
P.S.: 这就是我的目录的样子
提前感谢您的帮助
最佳答案
在您的示例中，您在加载jQuery ( Javascript.js ) 之前加载您自己的脚本( jQuery.min.js )，这将导致错误，因为您的代码预计jQuery 已经加载。颠倒这些脚本标签的顺序，对于 best practices , 将它们都移到 HTML 的底部，就在结束 </body> 之前标签。
Is there a way to find out, which one of the following things is the problem:
是的。您的浏览器有可用的“开发工具”，您可以使用它来确定这一点。在大多数浏览器中，它是 Ctrl+Shift+I(在 Mac 上是 Cmd+Shift+I)和/或 F12。
其中一个工具是 Web 控制台，它会向您显示很多内容，包括脚本错误(例如，当您的代码中存在语法错误时)。
另一个是网络选项卡，它向您显示网络请求，包括失败的请求(例如，当您错误地链接到脚本文件时)。
另一个是调试器，您可以使用它来查看您的代码、设置“断点”(这会使浏览器停在该行代码处以便您检查变量等) , 逐个语句地执行代码等。
一些资源:
Chrome Dev Tools - 专门介绍 Chrome 内置开发工具的网站。
Microsoft Edge Dev Tools - 专门介绍 Microsoft Edge 浏览器中的“F12 开发人员工具”的网站。 (其中大部分也与 IE11 相关。)
关于javascript - 我怎么知道我的 Javascript 执行了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36515835/