【发布时间】：2020-02-29 05:21:15
【问题描述】：
我有一个自动图像滚动 div，它由一个由小图像组成的 ul 组成。目标是拥有一个在页面加载后立即开始的简单滚动条。当我在本地浏览器中简单地运行代码（Html、CSS 和带有 jquery 的 js 文件）时，它可以完美运行，但在应用程序运行节点服务器时不会按预期执行。
我试图确保我的 jQuery 被识别，并在操作滚动条的主代码周围包含了一个包装 $(window).on("load") 函数。我研究过的许多类似帖子都有这个问题。我还仔细检查了服务器是否正在加载外部文件，它是。函数内的控制台日志显示在 chrome 控制台中，没有引发错误。还查看 chrome 控制台会显示正在加载到页面中的必要图像和外部脚本。在外部函数中测试更多的日志记录值表明正在访问资源，所以这可能是 jQuery + 节点的同步问题？任何帮助将不胜感激。
jQuery
$(window).on("load", function () {
$(function () {
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function () {
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
var controller = { curSpeed: 0, fullSpeed: 1 };
var $controller = $(controller);
var tweenToNewSpeed = function (newSpeed, duration) {
if (duration === undefined) {
duration = 600;
$controller.stop().animate({ curSpeed: newSpeed }, duration);
}
};
var doScroll = function () {
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW * 2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 20);
tweenToNewSpeed(controller.fullSpeed);
console.log("foo")
console.log(scrollerContent);
});
});
服务器文件
var express = require("express");
var db = require("./models/company.js");
var app = express();
var PORT = process.env.PORT || 8080;
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(express.static( __dirname + "/public"));
require("./routes/htmlRoutes.js")(app);
require("./routes/apiRoutes.js")(app);
db.sequelize.sync({ force: false }).then(function() {
app.listen(PORT, function () {
console.log("App listening on PORT: " + PORT);
});
})
module.exports = app;
相关的 CSS
#scroller {
position: relative;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#scroller ul {
padding: 0;
margin: 0;
position: relative;
}
#scroller li {
padding: 0;
margin: 0;
list-style-type: none;
position: absolute;
margin-left: 1%;
margin-right: 1%;
}
index.html 中的相关代码
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/index.css">
<title>RepoMan</title>
</head>
...
<!--AD Space-->
<div id="scroller" style="width: 1110px; height: 75px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<!-- Define photos here -->
<li><img class="ad-img" src="assets/images/sidebar/sm-allied.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-baja.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-bigtime.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-det.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-dyn.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-ken.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-locating.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-minuteman.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-nams.jpeg" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-rec.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-recmng.gif" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-repfl.png" /></li>
<li><img class="ad-img" src="assets/images/sidebar/sm-rsig.gif" /></li>
</ul>
</div>
</div>
...
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="assets/js/index.js"></script>
</body>
</html>
package.json
{
"name": "UW2",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"dev": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jquery": "^3.4.1",
"mysql2": "^1.7.0",
"nodemon": "^1.19.4",
"sequelize": "^5.21.1"
}
}
【问题讨论】：
-
能否请您发布您的 index.html、package.json 以及有关您的构建过程的一些信息？我需要更多信息
-
你不需要
$(window).on("load", function () {});使用你的匿名函数或使用$(document).ready(function(){ });并将你的jQuery代码放在里面。 -
我添加了 package.json 和 index.html 中的相关 html 代码。本质上，我声明了构成进入滚动 div 的 ul 的图像，然后克隆并附加它们以简单地延长 jquery 代码中的持续时间。 @Imran Khan 我同时使用了 (window).on 和 (document).ready 并且在节点运行时都没有按预期运行。两者都致力于本地测试。我的印象是 (window).on("load" 会更明确地等待 DOM 加载。
-
我认为问题出在
app.use(express.json());这行注释掉，然后重试。 -
@Imran Khan 不幸地注释掉该行并没有影响任何东西，无论是在本地还是在节点服务器中
标签： jquery html css node.js express