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上移模擬滾動。
以上技術參考其他人,如有侵權,歡迎來電。