js實現內容滾動效果
阿新 • • 發佈:2019-02-07
首先說下實現內容滾動效果的思路:在一塊區域內實現內容滾動效果,要求內容輪播,那麼如何實現輪播呢?我們將原內容複製一份放置其後面,當原內容滾動完成(即父層scrollTop等於原內容區高度時),我們將父層scrollTop設定為0,此時又從原內容開始滾動。如果瀏覽者想看內容時,但內容一直再滾動怎麼辦呢?我們可以通過設定onmouseover事件來控制,當用戶把滑鼠懸停至內容區時,停止滾動;當滑鼠移開時,繼續滾動。
以下是程式碼部分:
html程式碼:
<div class="scroll" id="scroll">
<div id="inner1">
<p >1好好學習天天向上!</p>
<p>2好好學習天天向上!</p>
<p>3好好學習天天向上!</p>
<p>4好好學習天天向上!</p>
<p>5好好學習天天向上!</p>
<p>6好好學習天天向上!</p>
<p>7好好學習天天向上!</p>
<p>8好好學習天天向上!</p >
</div>
<div id="inner2"></div>
</div>
css樣式:
ul,li,p{margin:0;padding:0;list-style: none}
body{padding:20px;}
.scroll{
line-height:28px;
border:2px dashed #666;
padding:0 20px;
height:112 px;
overflow:hidden;
background-color:#f1f1f1;
}
js程式碼:
function srcoll(){
var _scroll = document.getElementById("scroll"),
_inner1 = document.getElementById("inner1"),
_inner2 = document.getElementById("inner2"),
speed = 20;
_inner2.innerHTML = _inner1.innerHTML;
function marquee(){
if(_inner1.offsetHeight<=_scroll.scrollTop){
_scroll.scrollTop = 0
}else{
_scroll.scrollTop++;
}
}
var interval = setInterval(marquee,speed);
_scroll.onmouseover = function(){
clearInterval(interval);
}
_scroll.onmouseout = function(){
interval = setInterval(marquee,speed);
}
}
srcoll()