javascript - SCSS 和/或来自 CodePen 的 js 的问题
问题描述
我正在尝试使用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,.right,.section').css('height', '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 .middle, .section .right {
width: 50%;
font-size: 0.9em;
padding: 10px;
left: 0;
float: left;
position: absolute; } }
@media (min-width: 768px) {
.section .left, .section .middle, .section .right {
width: 33.33333%;
left: 33.33%;
padding: 10px; } }
@media (min-width: 992px) {
.section .left, .section .middle, .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%, 20%, 50%, 80%, 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 CDN（该笔的作者使用的特定版本）中的jQuery 2.1.3 添加到<head>html 文件中。我还添加了作者用于该笔的FontAwesome CDN 。最后，看起来您并没有从 html 文件中的任何位置引用脚本文件。</body>我在结束标签之前添加了它。
[===清晰度编辑===]
jQuery 是一个 JavaScript 库，它（至少在这种情况下）用于 DOM 操作（CSS-Tricks 上有对“DOM”的很好解释）。jQuery 本身并没有真正做任何事情……它只是简化了你做事的方式。必须将库本身添加到您的 html 文件中，以便您的代码知道其中一些符号/函数的含义（$.()例如符号）。
当 html 文档加载到 DOM 时，它会自顶向下加载。由于您的 .js 文件正在尝试操作 DOM 中的元素，因此您首先需要它们存在。这就是为什么我建议将您的 .js 文件放在结束</body>标记之前的原因。我原始答案的这一部分部分不正确，因为您的 .js 文件正在使用$(document).ready()jQuery 函数（我最初没有注意到）。只要您仍在 .js 文件之前加载 jQuery 库，就功能而言，放置它的位置并不重要。
然而，值得注意的是，在<head>块渲染中链接 .js 文件。虽然这对于您正在玩的演示或非常少量的 Javascript 可能不是问题，但随着大小的增加，它的性能会降低。Google Developer 网站上有一个不错的解释，他们还讨论了 .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>
推荐阅读
- mysql - Docker使用单个Dockerfile运行多个图像？
- ssh - 选择：ssh localforward 上的参数无效
- swift - Swift 性能 segue 和导航控制器
- css - 动态呈现图像多行多列
- java - tomcat 8突然没反应
- image-processing - 具有非常小的图像数据集的更快的 R-CNN 模型
- apache-camel - 将消息保留在主题中，直到所有消费者完成处理
- r - 将 x 和 y 网格坐标转换为 x 和 y 开始结束单元格坐标
- javascript - 当我尝试插入两条记录时，只有一条记录在 CUR_STOCK 表中得到更新？
- reactjs - 如何在子域的 iis 服务器上部署 react.js 项目？