Question

我目前正在开发一个投资组合，并尝试离线编码该网站。我希望在使用jQuery滚动时使图像淡出。

但是，我认为我的JScript很好（我不熟悉它，但看起来很好）。我认为问题是，我错误地链接到了jQuery。

有没有办法找出问题，其中一个问题是：

我的Jscript是错的
我错误地链接了jQuery

＆＃13;

$(document).ready(function() {});

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();
    $('.img-src_clean').css({
        'opacity': ((height - scrollTop) / height)
    });
});

＆＃13;

.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;

}

＆＃13;

<!-- 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>

＆＃13;

我希望它不会太乱。

P.S。：那是我的目录的样子

感谢您的帮助

Answer 1

在您的示例中，您在加载jQuery（Javascript.js）之前重新加载自己的脚本（jQuery.min.js），这会导致错误，因为您的代码需要jQuery已经加载了。颠倒这些脚本标记的顺序，对于best practices，将它们移动到HTML的底部，就在结束</body>标记之前。

有没有办法找出问题，其中一个问题是：

是。您的浏览器具有＆＃34;开发工具＆＃34;您可以使用它来确定。在大多数浏览器中，它是Ctrl + Shift + I（Mac上的Cmd + Shift + I）和/或F12。

其中一个工具是Web控制台，它会向您显示许多内容，包括脚本错误（例如，代码中出现语法错误时）。

另一个是网络标签，它会显示网络请求，包括失败的网络请求（例如，当您未正确链接到脚本文件时）。

另一个是调试器，您可以使用它来查看代码，设置＆＃34;断点＆＃34; （导致浏览器停在该行代码处，以便您可以检查变量等），逐步执行代码语句等。

一些资源：

Chrome Dev Tools - 专门介绍Chrome内置开发工具的网站。

Microsoft Edge Dev Tools - 致力于＆＃34; F12开发者工具＆＃34;在Microsoft Edge浏览器中。（其中大部分也与IE11有关。）

我怎么知道，我的Javascript执行？

1 个答案: