问题描述
我正在尝试使用 template from CodePen，但是无论我怎么尝试，我都无法让它工作。这肯定是我犯的某种基本错误。如果有人能告诉我它是什么，那就太好了。我使用 Atom 插件 + Ruby 来编译 .scss 代码。
我从 HTML Biolerplate 开始，但我认为它可能会由于不必要的点点滴滴的冲突而导致一些问题，所以我开始了一个准系统文件，但得到了相同的结果。
顺便说一句，jquery.min.js 和 gallery.css 都放在正确的文件夹中。
$(document).ready(function(){
var $sm = 480;
var $md = 768;
function resizeThis() {
$imgH = $('.middle img').width();
if ($(window).width() >= $sm) {
$('.left,.right,.section').css('height',$imgH);
} else {
$('.left,'auto');
}
}
resizeThis();
$(window).resize(function(){
resizeThis();
});
$(window).scroll(function() {
$('.section').each(function(){
var $elementPos = $(this).offset().top;
var $scrollPos = $(window).scrollTop();
var $sectionH = $(this).height();
var $h = $(window).height();
var $sectionVert = (($h/2)-($sectionH/4));
if (($elementPos - $sectionVert) <= $scrollPos && ($elementPos - $sectionVert) + $sectionH > $scrollPos) {
$(this).addClass('animate');
} else {
$(this).removeClass('animate');
}
});
});
$('.btn-primary').click(function(){
alert('I lied');
});
});
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
},1000);
return false;
}
}
});
});@import url(https://fonts.googleapis.com/css?family=Roboto:300,900);
body {
font-family: 'Roboto',sans-serif; }
.header,.footer {
background: #2e2e2e;
color: #fff;
padding: 30px;
text-align: center; }
.header a,.footer a {
color: #fff; }
@media (min-width: 768px) {
.header,.footer {
padding: 100px 30px; } }
.header h1,.footer h1 {
font-size: 4em;
font-weight: 300; }
.header i.fa,.footer i.fa {
font-size: 4em; }
.header .bounce,.footer .bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite; }
.header .animated,.footer .animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
.section {
width: 100%;
position: relative; }
.section .left,.section .middle,.section .right {
width: 100%;
display: block;
color: #fff;
Box-sizing: border-Box;
left: 0;
padding: 30px;
text-align: center;
overflow: hidden;
-moz-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all; }
@media (min-width: 480px) {
.section .left .content,.section .middle .content,.section .right .content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
@media (min-width: 480px) {
.section .left,.section .right {
width: 50%;
font-size: 0.9em;
padding: 10px;
left: 0;
float: left;
position: absolute; } }
@media (min-width: 768px) {
.section .left,.section .right {
width: 33.33333%;
left: 33.33%;
padding: 10px; } }
@media (min-width: 992px) {
.section .left,.section .right {
padding: 30px;
font-size: 1em; } }
.section.animate .left {
left: 0; }
@media (min-width: 480px) {
.section.animate .left {
left: 50%; } }
@media (min-width: 768px) {
.section.animate .left {
left: 0; } }
.section.animate .right {
left: 0; }
@media (min-width: 480px) {
.section.animate .right {
left: 50%; } }
@media (min-width: 768px) {
.section.animate .right {
left: 66.66%; } }
.section .title {
background: tomato; }
.section .title h2 {
margin-top: 0; }
.section .title p {
line-height: 1.55em;
margin-bottom: 0.75em; }
.section .title .btn-primary {
color: #fff;
background: #ff3814;
padding: 10px;
text-decoration: none;
border-radius: 3px;
display: inline-block;
-moz-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all; }
.section .title .btn-primary:hover {
background: #fa2600; }
.section .tiles {
padding: 0;
background: #fff;
clear: both;
display: none;
float: none; }
.section .tiles img {
width: 50%;
float: left;
height: auto;
opacity: 0.7;
-moz-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%); }
.section .tiles img:hover {
opacity: 1;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%); }
@media (min-width: 768px) {
.section .tiles {
display: block; } }
.section .middle {
background: slategray;
z-index: 2;
padding: 0; }
.section .middle img {
width: 100%;
height: auto;
display: block; }
@-webkit-keyframes bounce {
0%,20%,50%,80%,100% {
-webkit-transform: translateY(0); }
40% {
-webkit-transform: translateY(-20px); }
60% {
-webkit-transform: translateY(-10px); } }
@keyframes bounce {
0%,100% {
transform: translateY(0); }
40% {
transform: translateY(-20px); }
60% {
transform: translateY(-10px); } }
/*# sourceMappingURL=gallery.css.map */<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/gallery.css">
<Meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="header" id="top">
<h1>Scroll Down</h1>
<i class="fa fa-angle-down animated bounce"></i>
</div>
<div class="section animate">
<div class="middle">
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="left title">
<div class="content">
<h2>A glorIoUs nature shot.</h2>
<p>Wow. What a wonderful image. And look! there are even more images on the right side. Amazing. If you click below,I bet you'll get teleported to a magical land.</p>
<a href="#" class="btn-primary">Learn more</a>
</div>
</div>
<div class="right tiles">
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="section">
<div class="middle">
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="right title">
<div class="content">
<h2>Check out this guy.</h2>
<p>What an interesting looking person! I wonder if they've ever climbed Mount Everest,or seen the Egyptian Pyramids. If not,I hope that one day they get to. You go random stock image person! Follow your dreams!</p>
</div>
</div>
<div class="left tiles">
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="section">
<div class="middle">
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="left title">
<div class="content">
<h2>That is one pretty building.</h2>
<p>I once thought about becoming an architect. I wanted to create a house fit for a king. But then I Failed maths. So I became a frontend developer instead.</p>
</div>
</div>
<div class="right tiles">
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="section">
<div class="middle">
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="right title">
<div class="content">
<h2>The future is Now.</h2>
<p>Check out that technology! Imagine if we went back in time and put one of those in the hands of a neanderthal. Do you think they'd be impressed,or just try to club us to death?</p>
</div>
</div>
<div class="left tiles">
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="footer">
<a href="#top" class="scrollTo"><i class="fa fa-angle-up animated bounce"></i></a>
<h1>Scroll Up</h1>
</div>
<script src="js/jquery.min.js"></script>
</body>
</html>解决方法
给出解决方案有点困难，不知道您最终看到的是什么，但有一些事情让我印象深刻。在我改变了这些东西之后，我的一切都变得美好了。请记住，我只是将您的三个文件复制粘贴到我自己的 3 个本地文件中，然后在 VSCode 上与 Live Server 一起运行。
我将 jQuery 2.1.3 从 jQuery CDN（该笔的作者使用的特定版本）添加到 html 文件的 <head>。我还添加了作者用于该 Pen 的 FontAwesome CDN。最后，您似乎没有从 html 文件的任何位置引用脚本文件。我在结束 </body> 标记之前添加了它。
[===清晰编辑===]
jQuery 是一个 JavaScript 库，它（至少在这种情况下）用于 DOM 操作（CSS-Tricks 上有一个很好的 explanation of "the DOM"）。 jQuery 本身并没有真正做任何事情……它只是简化了你做事的方式。库本身必须添加到您的 html 文件中，以便您的代码知道其中一些符号/函数的含义（例如 $.() 表示法）。
当 html 文档加载到 DOM 时，它会自上而下加载。由于您的 .js 文件试图操作 DOM 中的元素，因此您首先需要它们存在。这就是为什么我建议将您的 .js 文件放在结束 </body> 标签之前。我原始答案的这部分部分不正确，因为您的 .js 文件正在使用 $(document).ready() jQuery 函数（我最初没有注意到）。只要您仍然在 .js 文件之前加载 jQuery 库，那么将它放在哪里都无关紧要，功能方面。
然而，值得注意的是，在 <head> 中链接 .js 文件会阻止渲染。虽然这对于您正在使用的演示或非常少量的 Javascript 可能不是问题，但随着大小的增加，它的性能会降低。 Google 开发者网站上有一个 decent explanation，他们还讨论了 .js 文件的异步加载。
[===结束清晰度编辑===]
总而言之，这就是我的 HTML 文件的样子。中间我什么都没做。
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">.
</script>
</head>
<body>
[ALL THE HTML HERE]
[LAST THING IN THE BODY TAG...This would need to be the name of your javascript file]
<script src="scripts.js"></script>
</body>
从 CodePen 中获取内容时，我的最佳建议是检查 HTML / CSS / JS 标题旁边的小齿轮图标，并确保您不仅导入它们的内容，还导入特定版本，如果您是希望拥有完全相同的行为。
最后，感谢 CodePen 作者总是好的（即使它只是在某处的评论中）。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="header" id="top">
<h1>Scroll Down</h1>
<i class="fa fa-angle-down animated bounce"></i>
</div>
<div class="section animate">
<div class="middle">
<img
src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="left title">
<div class="content">
<h2>A glorious nature shot.</h2>
<p>Wow. What a wonderful image. And look! there are even more images on the right side. Amazing. If you click
below,I bet you'll get teleported to a magical land.</p>
<a href="#" class="btn-primary">Learn more</a>
</div>
</div>
<div class="right tiles">
<img
src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1460400408855-36abd76648b9?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="section">
<div class="middle">
<img
src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="right title">
<div class="content">
<h2>Check out this guy.</h2>
<p>What an interesting looking person! I wonder if they've ever climbed Mount Everest,or seen the Egyptian
Pyramids. If not,I hope that one day they get to. You go random stock image person! Follow your dreams!</p>
</div>
</div>
<div class="left tiles">
<img
src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="section">
<div class="middle">
<img
src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="left title">
<div class="content">
<h2>That is one pretty building.</h2>
<p>I once thought about becoming an architect. I wanted to create a house fit for a king. But then I failed
maths. So I became a frontend developer instead.</p>
</div>
</div>
<div class="right tiles">
<img
src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1465326117523-6450112b60b2?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="section">
<div class="middle">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
<div class="right title">
<div class="content">
<h2>The future is now.</h2>
<p>Check out that technology! Imagine if we went back in time and put one of those in the hands of a
neanderthal. Do you think they'd be impressed,or just try to club us to death?</p>
</div>
</div>
<div class="left tiles">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=format&crop=entropy&fit=crop&w=250&h=250&q=80" />
</div>
</div>
<div class="footer">
<a href="#top" class="scrollTo"><i class="fa fa-angle-up animated bounce"></i></a>
<h1>Scroll Up</h1>
</div>
<script src="scripts.js"></script>
</body>
</html>