一、Html布局
<body>
<div id="rollInfo">
<div id="item"><h3>無縫滾動</h3></div>
<div id="infoText">
<ul id="con1">
<li>1、學會HTML5</li>
<li>2、學會CSS3</li>
<li>3、學會寫原生Js</li>
<li>4、學會使用Jquery</li>
<li>5、學會使用bootstarp</li>
<li>6、學會Augular</li>
<li>7、學會Node</li>
<li>8、學會React</li>
<li>9、學會Vue</li>
</ul>
<ul id="con2"></ul>
</div>
</div>
</body>
二、Css樣式
<style>
body,h3,ul{
margin:0;
padding: 0;
}
ul{
list-style: none;
}
#rollInfo{
width: 400px;
height: 300px;
margin:0 auto;
margin-top: 30px;
border: 1px solid #ccc;
border-radius: 5px;
}
#item{
width: 100%;
height: 100px;
background: pink;
border: 2px solid #ddd;
text-align: center;
}
#item h3{
display: inline-block;
margin:10% 0px;
}
#infoText{
text-align: center;
background: #e3c06e;
height:200px;
width: 100%;
overflow: hidden;
/*超出部分隱藏 一定要加*/
}
#infoText li{
height: 40px;
/*單條信息的高度*/
}
</style>
三、Js部分
<script>
window.onload = function(){
var area = document.getElementById("infoText");
var con1 = document.getElementById("con1");
var con2 = document.getElementById("con2");
//要實現無縫滾動 必須clone一份滾動的內容
con2.innerHTML = con1.innerHTML;
function scrollUp(){
if(area.scrollTop >= con1.offsetHeight){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
var myScroll =setInterval(scrollUp,50);
//鼠標懸停
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll =setInterval(scrollUp,50);
//不能再使用 var myScroll 定義setInterval
//這樣每次移出都會打開新的定時器
}
}
</script>
<script>
window.onload = function(){
var area = document.getElementById("infoText");
var con1 = document.getElementById("con1");
var con2 = document.getElementById("con2");
con2.innerHTML = con1.innerHTML;
要實現無縫滾動 必須clone一份滾動的內容
area.scrollTop = 0;
var iLiHeight = 40;//滾動距離 目前等于單條信息高度
var speed = 50;//滾動速度
var delay = 2000;//滾動的間歇時間
var timer;
function startMove(){
area.scrollTop++;
timer =setInterval(scrollUp,speed);
}
function scrollUp(){
if(area.scrollTop%iLiHeight == 0){
//如果滾動高度等于信息高度的整數倍
clearInterval(timer);
setTimeout(startMove,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
//area.scrollHeight/2的值等于con1.offsetHeight
area.scrollTop = 0;
}
}
}
setTimeout(startMove,delay);//初始化
}
</script>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
