替换"marquee",实现无缝滚动
js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就是left或者right,接下来是实现方法:实现li标签上下无缝滚动
废话少说,粘贴代码,可以直接运行。
<!DOCTYPE html>
<html>
<head>
<title>测试滚动</title>
<!-- 引入在线Jquery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
#marquee li {
height: 30px;
}
</style>
<body>
<div style="height:180px;overflow:hidden;">
<div id="marquee">
<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>
</div>
</body>
<script>
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上移模拟滚动。
以上技术参考其他人,如有侵权,欢迎来电。