1⃣️直接利用标签marquee(但这种方法貌似已经呗W3C放弃了,不建议使用)
<ul class="list">
<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="4">
<c:forEach items="${releaseList}" var="release" begin="0" end="4">
<li><a onclick="seeDatil('${release.id }');"><span>·</span>
${release.title }</a></li>
</c:forEach>
</marquee>
<!-- direction属性:设置滚动方式
onmouseout属性:设置当鼠标离开时要做什么
onmouseover属性:设置当鼠标移到上面时要做什么
scrollAmount属性:设置滚动的速度。1为最慢 -->
</ul>
2⃣️原生的js,编写的方法。(这个挺好,也行的)
<ul class="list" id="c1">
<c:forEach items="${releaseList}" var="release" begin="0" end="5">
<li><a onclick="seeDatil('${release.id }');">
<span>·</span>${release.title }</a></li>
</c:forEach>
</ul>
<ul class="list" id="c2"></ul>
#ca ul {
margin: 0;
}
#ca {
overflow: hidden;
height: 100px;
}
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var ca = document.getElementById("ca");
/*将第一个ul的值赋值给第二个 当第一个头部消失时 由第二个来显示*/
c2.innerHTML = c1.innerHTML;
var cas = null;
window.onload = function() {
st();
}
cas = setInterval('st()', 50);
function st() {
/*如果滚动长度大于第一个ul的高度 就需要将第一个ul回到原处 */
if (ca.scrollTop >= c1.offsetHeight) {
ca.scrollTop = 0;
} else {
ca.scrollTop++;
}
/*鼠标移入就清除清除定时器*/
ca.onmouseover = function() {
clearInterval(cas);
}
ca.onmouseout = function() {
cas = setInterval('st()', 50);
}
}
3⃣️简单易用的无缝滚动。jquery的kxbdMarquee实现。(推荐)
=》这种实现需要多引入一个js(jquery.kxbdmarquee.js)这个js网上找吧,如果找不到的可以留言,我会给你发。
<script type="text/javascript" src="${basePath }/static/plugins/jquery/jquery.kxbdmarquee.js"></script>
<ul class="list">
<c:forEach items="${releaseList}" var="release" begin="0" end="5">
<li><a onclick="seeDatil('${release.id }');"><span>·</span>${release.title }</a></li>
</c:forEach>
</ul>
#marquee {
overflow: hidden;
}
$("#marquee").kxbdMarquee({
isEqual : true, //所有滚动的元素长宽是否相等,true,false
loop : 0, //循环滚动次数,0时无限
direction : "up", //滚动方向,"left","right","up","down"
scrollAmount : 1, //步长
scrollDelay : 200 //时长
});
☀️☀️☀️