在HTML網頁設計中，經常需要將一段文本按照一定的排列方式進行展示，而有時候這些文本比較長，不便于一次性展示。這時候循環上下滾動的效果就能提供更好的展示效果。
下面是一個基本的HTML循環上下滾動代碼：
<html>
<head>
<title>循環上下滾動演示</title>
<style>
#scroll_content {
height: 100px; /*設置顯示區域高度*/
overflow: hidden; /*隱藏溢出部分*/
position: relative; /*相對定位*/
}
#scroll_content ul {
position: absolute; /*絕對定位*/
top: 0; /*初始top為0*/
}
#scroll_content ul li {
list-style: none; /*去除li前面的點形符號*/
height: 30px; /*設置每個li高度*/
line-height: 30px; /*設置每個li的行高*/
}
</style>
</head>
<body>
<div id="scroll_content">
<ul>
<li>第 1 行</li>
<li>第 2 行</li>
<li>第 3 行</li>
<li>第 4 行</li>
<li>第 5 行</li>
<li>第 6 行</li>
</ul>
</div>
<script>
setInterval("myfunction()", 1000); //每1秒執行一次myfunction()
var i = 0;
function myfunction() {
var ul = document.querySelector("#scroll_content ul");
if(i >(ul.children.length-1)*30) { //當i超過所有li的總高度時，重置i值
i = 0;
}
ul.style.top = -i + "px"; //根據i值設置ul的top值，實現滾動效果
i++;
}
</script>
</body>
</html>該代碼使用了CSS中的overflow:hidden屬性將超出顯示區域的部分隱藏起來，同時使用position屬性和top屬性實現了循環滾動效果。
通過深入學習和理解網頁設計中的相關技術和代碼，我們可以創建出更加獨特和豐富的網站。
上一篇mysql劉道成與韓忠康
下一篇mysql創主鍵