Question

我在jsfiddle中有一个有效的脚本：https://jsfiddle.net/oxw4e5yh/

然而，在HTML doc中，它无效：

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript">
        function calcSpeed(speed) {
            // Time = Distance/Speed
            var spanSelector = document.querySelectorAll('.marquee span'),
                i;
            for (i = 0; i < spanSelector.length; i++) {
                var spanLength = spanSelector[i].offsetWidth,
                    timeTaken = spanLength / speed;
                spanSelector[i].style.animationDuration = timeTaken + "s";
            }
        }
        calcSpeed(75);
    </script>


    <style>
        /* Make it a marquee */

        .marquee {
            width: 100%;
            left: 0px;
            height: 10%;
            position: fixed;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
            background-color: #000000;
            bottom: 0px;
            color: white;
            font: 50px'Verdana';
        }
        .marquee span {
            display: inline-block;
            padding-left: 100%;
            text-indent: 0;
            animation: marquee linear infinite;
            animation-delay: 5s;
            background-color: #000000;
            color: white;
            bottom: 0px;
        }
        /* Make it move */

        @keyframes marquee {
            0% {
                transform: translate(10%, 0);
            }
            100% {
                transform: translate(-100%, 0);
            }
        }
        /* Make it pretty */

        .scroll {
            padding-left: 1.5em;
            position: fixed;
            font: 50px'Verdana';
            bottom: 0px;
            color: white;
            left: 0px;
            height: 10%;
        }
    </style>
</head>

<body>
    <div class="marquee">
        <span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
    </div>

</body>

</html>

该脚本是一个css和javascript选框，用于控制滚动文本的稳定速度。

知道我缺少什么吗？

另外，正如您在小提琴上看到的那样，文本开始滚动需要一段时间。我可以减少延迟吗？

Answer 1

在所有DOM准备就绪后调用您的JS函数，通常使用window.onload完成，如下所示：

window.onload = function() {
    calcSpeed(75);
}

Answer 2

您正在尝试选择尚未创建的元素。

将脚本移至选框

下方

<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
</div>
<script type="text/javascript">
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
  timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);

</script>

Answer 3

在关闭身体之前放置你的脚本和样式代码。

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen.    Well I hope it goes off the screen</span>
</div>
<script>
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
  timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(75);

</script> 


<style>
/* Make it a marquee */

.marquee {
width: 100%;
left: 0px;
height: 10%;
position: fixed;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
font: 50px'Verdana';
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */

@keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */

.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}</style>
</body>

</html>

这适用于我

Answer 4

您应该在页面的最后一页写下所有脚本，因为脚本会尝试查找标记ID并且DOM没有准备好时间而不是给出错误。

<强>示例

<html>
    <head>
        <style>
            /* your style here */
        </style>
    </head>
    <body>
        <!-- your html here -->
        <script>
            // your script here
        </script>
    </body>
</html>

请阅读 JavaScript and CSS order

Answer 5

见这个

function calcSpeed() {
  // Time = Distance/Speed
  var spanSelector = document.querySelectorAll('.marquee span'),
    i;
  for (i = 0; i < spanSelector.length; i++) {
    var spanLength = spanSelector[i].offsetWidth,
      timeTaken = spanLength / 1000;
    spanSelector[i].style.animationDuration = timeTaken + "s";
  }
//calcSpeed(10);
}
</script>



<body onload="calcSpeed()">

我在Chrome和Firefox上测试过它......效果很好。所以，我认为它也适合你。

脚本适用于jsfiddle但不适用于HTML文档

5 个答案: