替换"marquee"，实现无缝滚动

　　js的marquee标签，可以实现元素循环滚动，但是不能无缝连接，要实现“无缝滚动”的效果必须使用js（借鉴百度），思路是使要滚动元素相对位置不断改变，上下滚动就相对top或者bottom，左右滚动就是left或者right，接下来是实现方法：实现li标签上下无缝滚动

　　废话少说，粘贴代码，可以直接运行。

<!DOCTYPE html>

<html>

　　<head>

　　</head>

　　<style>

　　　　#marquee li {

　　　　height: 30px;

　　　}

　　</style>

<body>

　　　　　　<li>

　　　　　　　　<span>1.水规院自动化码头设计关键技术研究工作交流会顺利召开</span>

　　　　　　</li>

　　　　　　<li>

　　　　　　　　<span>2.巨型通航建筑物通航标准体系研究</span>

　　　　　　</li>

　　　　　　<li>

　　　　　　　　<span>3.中交集团跃居世界500强第210位</span>

　　　　　　</li>

　　　　　　<li>

　　　　　　　　<span>4.中交股份获评多项长江口深水航道治理工程建设先进</span>

　　　　　　</li>

　　　　　　<li>

　　　　　　　　<span>5.海南省与中交股份将全方位合作</span>

　　　　　　</li>

　　　　　　<li>

　　　　　　　　<span>6.长江船舶设计院获中国标准创新贡献一等奖</span>

　　　　　　</li>

　　　　</div>

</body>

　　window.onload = function () {

　　　　scrolldiv();

　　　　// 鼠标停留，离开

　　　　$("#marquee").mouseenter(function () {

　　　　　　window.clearInterval(timename);

　　 });

　　　　$("#marquee").mouseleave(function () {

　　　　　　timename = setInterval("doScroll()", 50);

});

}

　　var marquee = document.getElementById("marquee");

　　var offset = 0;

　　var scrollheight = marquee.offsetHeight;

　　var length = marquee.children.length;

　　function scrolldiv() {

　　　　// 不可见处增加同等数量的li元素，模拟无缝连接（实际应该最上面li元素

　　　　// 滚动到不可见之后，删除最上面li元素，再给div末尾添加删除的li元素）

　　　　for (vari = 0; i < length - 1; i++) {

　　　　　　var node = marquee.children[i].cloneNode(true);

　　　　　　marquee.appendChild(node);

　　}

　　　　// 执行滚动，利用margin-top

　　　　timename = setInterval("doScroll()", 50);

}

　　function doScroll() {

　　　　if (offset == scrollheight) {

　　　　　　offset = 0;

}

　　　　marquee.style.marginTop = "-" + offset + "px";

　　　　offset += 1;

}

</script>

</html>

核心思路：1.增加可见高度的元素（appendChild)。

　　　　 2.定时刷新margin-top使div上移模拟滚动。

以上技术参考其他人，如有侵权，欢迎来电。

巴特西

替换"marquee"，实现无缝滚动

最新文章

热门文章