標籤：htm 定時器 document center fse val slide enter box
js原生/jQuery實現頁面滾動字幕效果17:45:49
在新聞列表或者文章列表資訊等頁面中很容易要求實現字幕滾動的效果，以下為簡單的實現頁面中滾動字幕的效果
1、jQuery實現頁面滾動字幕效果
代碼如下：
<div class="box">
<ul class="list">
<li>這是滾動式載入的第1條資料</li>
<li>你猜猜這是第幾條滾動式載入的文字</li>
<li>這是滾動式載入的第3條資料</li>
<li>你猜猜這是第幾條滾動式載入的文字</li>
<li>這是滾動式載入的第5條資料</li>
<li>你猜猜這是第幾條滾動式載入的文字</li>
<li>這是滾動式載入的第7條資料</li>
<li>你猜猜這是第幾條滾動式載入的文字</li>
<li>這是滾動式載入的第9條資料</li>
</ul>
</div>
<style>
.box{
width: 300px;height: 100px;overflow: hidden;
margin: 50px auto;font: 14px/24px "微軟雅黑";color: #666;
}
ul{
width: 260px;margin:10px auto;
}
li{
padding-left: 10px;
}
</style>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function gunDong(){
var big = $("ul");
var ob = $("ul li:last");
ob.hide();
ob.prependTo(big);
ob.slideDown("100");
}
var timer = setInterval("gunDong()",1000);
$("div").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval("gunDong()",1000)
})
</script>
2、js原生實現
<body>
<div class="box">
<ul class="list" id="list">
<div id="li_box">
<li>這是滾動式載入的第1條資料</li>
<li>你猜猜這是第幾條滾動式載入的文字</li>
<li>這是滾動式載入的第3條資料</li>
<li>你猜猜這是第幾條滾動式載入的文字</li>
<li>這是滾動式載入的第5條資料</li>
<li>你猜猜這是第幾條滾動式載入的文字</li>
<li>這是滾動式載入的第7條資料</li>
<li>你猜猜這是第幾條滾動式載入的文字</li>
<li>這是滾動式載入的第9條資料</li>
</div>
<div id="li_show"></div>
</ul>
</div>
</body>
<style>
.box{
width: 500px;height: 160px;overflow: hidden;
margin: 50px auto;font: 14px/24px "微軟雅黑";color: #666;border: 1px solid #ccc;
}
ul{
width: 260px;height: 140px;margin:10px auto;overflow: hidden;
}
li{
padding-left: 10px;
}
</style>
<script type="text/javascript">
var ul_cont = document.getElementById("list");
var li_box = document.getElementById("li_box");
var li_show = document.getElementById("li_show");
li_show.innerHTML = li_box.innerHTML;//將li所在的div裡邊的內容賦給下邊的div
function gunDong(){
if(li_show.offsetHeight - ul_cont.scrollTop <= 0){//如果ul的滾動高度大於列表的高度
ul_cont.scrollTop -= li_box.offsetHeight;//ul的滾動高度減去列表的高度
console.log(ul_cont.scrollTop);
}else{
ul_cont.scrollTop++;//ul的滾動高度遞增
}
}
var timer = setInterval(gunDong,100);//定時器，函數每隔100毫秒觸發一次事件
ul_cont.onmouseover = function(){
clearInterval(timer);//滑鼠滑入事件停止
};
ul_cont.onmouseout = function(){
timer = setInterval(gunDong,100);//滑鼠滑出事件開始
}
</script>
js原生 + jQuery實現頁面滾動字幕
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
