Question

我想循环这段代码，因为这是新闻自动收录器，我想重复运行。请帮助我。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>News Ticker</title>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
</head>
<body style="margin:0px">
<div style="background-color: #CCCCCC; width: 100%; height: 40px">
<span id="ticker" style="left: 120%; position: absolute; overflow: hidden; top:10px;   width: 30%">This is a text</span>
</div>

<script type="text/javascript">

        $("#ticker").animate({ "left": "-420px" }, 1000, 'linear', ticker);

</script> 

</body>
</html>

Answer 1

你快到了。只需要解决几个问题：

您需要将动画方法放在函数中，以便再次调用它。然后，您需要最初调用该函数。
您需要重置left的{{1}}属性，以便每次都不会继续<span>。
您（可能）需要向父母提供-420px和position:relative以将overflow:hidden相对于其父级置位，并在不在其父级边界内时将其隐藏：

<强> HTML

<span>

<强>的JavaScript

<div style="background-color: #CCCCCC; width: 100%; height: 40px; overflow:hidden; position:relative;">
    <span id="ticker" style="left: 120%; position: absolute; overflow: hidden; top:10px;   width: 30%">This is a text</span>
</div>

JSFiddle

新闻报道循环

1 个答案: