<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>News</title>
<style>
*{
margin: 0;
padding: 0
}
#all{
width: 25%;
height: 330px;
margin: 6% 65%;
border: 1px solid #A4B4C1;
box-shadow: #A4B4C1 5px 0px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
z-index: 1;
}
#wrapper{
overflow:hidden;
width: 100%;
height: 300px;
}
#div2 {
/*background:#eeeeee;*/
margin: auto;
padding: 0 30px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="all">
<div id="wrapper">
<div id="demo1">
<div id="div2">
<a href="跳轉路徑" style="text-decoration: none">
<b style="color: #5B9BD5">[標題]</b>
<font color="black" class="title">
內容
</font>
<span style="color: lightslategrey;font-size: 14px;">[時間]</span>
<br/>
<hr class="simple" color="#5B9BD5" />
</a>
<br/>
</div>
</div>
<div id="demo2">
</div>
<div id="demo3">
</div>
</div>
<div style="margin-right: 15px">
<a href="跳轉路徑" style="float: right;color: #5B9BD5">View more...</a>
</div>
</div>
</body>
<script>
var speed = 50; // 可自行設置文字滾動的速度
var wrapper = document.getElementById('wrapper');
var demo1 = document.getElementById('demo1');
var demo2 = document.getElementById('demo2');
demo2.innerHTML=demo1.innerHTML //克隆demo1爲demo2
demo3.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetHeight-wrapper.scrollTop<=0) //當滾動至demo1與demo2交界時
wrapper.scrollTop-=demo1.offsetHeight //demo跳到最頂端
else{
wrapper.scrollTop++ //如果是橫向的 將 所有的 height top 改成 width left
}
}
var MyMar=setInterval(Marquee,speed) //設置定時器
wrapper.onmouseover=function() {clearInterval(MyMar)} //鼠標移上時清除定時器達到滾動停止的目的
wrapper.onmouseout=function() {MyMar=setInterval(Marquee,speed)} //鼠標移開時重設定時器
</script>
</html>
html上下無縫滾動彈幕
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章