通过js设置了文字的无缝滚动,如图1
但是浏览了其他页面回来后就就成了图2的样子,这个情况在谷歌、火狐、Opera都有这个情况,ie却是正常的
js代码如下
function baner() {
var ban = document.querySelector(".ban"),
ba,
index = 0,
ru;
if (ban) {
ru = setInterval(run, 3000);
function run() {
ba = setInterval(function() {
index++;
ban.style.top = -index + "px";
if (index % 20 == 0) {
clearInterval(ba);
}
if (index == 220) {
index = 0
ban.style.top = "0px";
}
}, 40)
}
/* 鼠标移入滚动停止 */
ban.onmouseover = function() {
clearInterval(ru);
clearInterval(ba);
/* 鼠标移出滚动继续 */
ban.onmouseout = function() {
run();
ru = setInterval(run, 3000);
}
}
}
}
html代码如下
<div class="ban">
<a href="" rel="nofollow">
<p>① 完善文章信息</p>
</a>
<a href="" rel="nofollow">
<p>② 开具初审录用</p>
</a>
<a href="" rel="nofollow">
<p>③ 编辑整理稿件</p>
</a>
<a href="" rel="nofollow">
<p>④ 英语编辑审稿</p>
</a>
<a href="" rel="nofollow">
<p>⑤ 总编室审稿</p>
</a>
<a href="" rel="nofollow">
<p>⑥ 外审编辑审稿</p>
</a>
<a href="" rel="nofollow">
<p>⑦ 排版校对</p>
</a>
<a href="" rel="nofollow">
<p>⑧ 印刷前校对</p>
</a>
<a href="" rel="nofollow">
<p>⑨ 印刷出刊</p>
</a>
<a href="" rel="nofollow">
<p>⑩ 邮寄</p>
</a>
<a href="" rel="nofollow">
<p>⑪ 出刊后30天左右知网收录</p>
</a>
<a href="" rel="nofollow">
<p>① 完善文章信息</p>
</a>
<a href="" rel="nofollow">
<p>② 开具初审录用</p>
</a>
<a href="" rel="nofollow">
<p>③ 编辑整理稿件</p>
</a>
</div>