Question

我用纯JavaScript制作了一个字幕，该脚本可在本地计算机上使用。这是代码：

var wrap = document.getElementById("rolloverWrap");
var slide = document.getElementById("rollover");
var items = document.getElementsByTagName("li");
var w1 = wrap.offsetWidth; //rolloverWrap width. It's a block element by default it takes 100% of windows width
var w2 = slide.offsetWidth; //rollover width
var head = w1,
  timer,
  step;

window.onload = function() {
  if (w1 < 600) {
    step = 3;
  } else {
    step = 6;
  }
  slide.style.left =
    w1 +
    "px"; /* The position from the left of the rollover element takes 100% of the window width.
                                               The goal is to prevent that rollover element appears in the middle of the window's width after 
                         the script loads and force the element to start rolling from the right*/

  for (var i = 0; i < items.length; i++) {
    // this loop attached two EventListener to each <li> of the rollover
    items[i].addEventListener("mouseover", function stopRoll() {
      clearInterval(timer);
    });
    items[i].addEventListener("mouseout", startCycle);
  }
};

window.addEventListener("resize", function() {
  w1 = wrap.offsetWidth; //Updates the w1 value each time the window is resized
  w2 = slide.offsetWidth; //Also updates the w2 value because the responsive stylesheet
  if (w1 <= head) head = w1; // When window width gets smaller than head value computed by startCycle then head=w1
  // that means the head of the rollover appears instantly from the right
  if (w1 < 600) {
    step = 3;
  } else {
    step = 6;
  } // Changes the step value according whit w1 value
});

function startCycle() {
  timer = setInterval(function() {
    head -= step;
    slide.style.left = head + "px";
    if (head < -w2) head = w1;
  }, 100);
}

#rolloverWrap {
  position: relative; /*prevents scroll */
  margin-top: 300px;
  overflow: hidden;
  line-height: 1.5rem;
  background: #caadde;
}

#rollover {
  position: relative; /*It needs to be relative or absolute in order the rolling works*/
  color: #374b64;
  font-size: 1.13rem;
  font-weight: 300;
  width: 811px; /* the width that is need for all the items*/
  height: 1.5rem; /* forces the parent element to have the same height*/
  overflow: hidden; /*prevents the element of having unexpected behavior*/
}

#rollover {
  list-style-type: none;
}

#rollover li {
  float: left;
  margin: 0 15px;
  cursor: pointer;
}

#rollover li:hover {
  color: #f9f9f9;
}

<div id="rolloverWrap">
  <ul id="rollover">
    <li style="margin-left:0;">HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
    <li>JQuery</li>
    <li>Ajax</li>
    <li>Jason</li>
    <li>AngularJS</li>
    <li>PHP</li>
    <li>Linux</li>
    <li style="margin-right:0;">MySQL</li>
  </ul>
</div>
<script src="assets/script.js?v=<?php echo date('His'); ?>"></script>
<script>
  startCycle();
</script>

但是当我将此代码复制到jsfiddle，codepen甚至是代码段时，他们所有人都说startCycle函数没有被分割。您能告诉我JS代码是否有问题，因为该代码可以在本地计算机上运行，甚至可以在远程VPS（contrata-me.pt）上运行。谢谢

在线沙箱中未定义功能

0 个答案: