js文字无限循环向上滚动
<!doctype?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>js文字無限循環向上滾動</title>
????<style>
????????*?{
????????????margin:?0;
????????????padding:?0;
????????????box-sizing:?border-box;
????????}
????????#scroll?{
????????????width:?300px;
????????????height:?300px;
????????????position:?absolute;
????????????top:?50%;
????????????left:?50%;
????????????transform:?translate(-50%,?-50%);
????????????background:?#3F51B5;
????????????overflow:?hidden;
????????}
????????#scroll?#con1,
????????#con2?{
????????????width:?100%;
????????}
????????.title?{
????????????color:?red;
????????}
????????#scroll?p?{
????????????text-align:?center;
????????????height:?16px;
????????????line-height:?16px;
????????????margin-bottom:?16px;
????????}
????</style>
</head>
?
<body>
????<div?id="scroll">
????????<div?id="con1">
????????????<p?class="title">誰伴我闖蕩?-Beyond</p>
????????????<p>前面是哪方</p>
????????????<p>誰伴我闖蕩</p>
????????????<p>沿路沒有指引</p>
????????????<p>若我走上又是窄巷</p>
????????????<p>尋夢像撲火</p>
????????????<p>誰共我瘋狂</p>
????????????<p>長夜漸覺冰凍</p>
????????????<p>但我只有盡量去躲</p>
????????????<p>幾多天真的理想</p>
????????????<p>幾多找到是頹喪</p>
????????????<p>沉默去迎失望</p>
????????????<p>幾多心中創傷</p>
????????????<p>只有淡忘</p>
????????????<p>從前話說要如何</p>
????????????<p>其實你與昨日的我</p>
????????????<p>活到今天變化甚多</p>
????????????<p>只有頑強</p>
????????????<p>明日路縱會更彷徨</p>
????????????<p>疲倦慣了再沒有感覺</p>
????????????<p>別再可惜計較什么</p>
????????????<p>始終上路過</p>
????????</div>
????????<div?id="con2"></div>
????</div>
????<script>
????????var?time?= 60;?//?滾動間隙
????????var?box?=?document.getElementById('scroll');?//?獲取父元素
????????var?con1?=?document.getElementById('con1');
????????var?con2?=?document.getElementById('con2');
????????con2.innerHTML?=?con1.innerHTML;
????????function?Up()?{
????????????if?(box.scrollTop?>=?con1.offsetHeight)?{
????????????????box.scrollTop?=?0;
????????????}?else?{
????????????????box.scrollTop++
????????????}
????????}
????????var?setlId?=?setInterval(Up,?time);
????????//鼠標移上父元素時清除定時器
????????box.onmouseover?=?function()?{
????????????????clearInterval(setlId);
????????????}
????????????//鼠標離開父元素時觸發事件
????????box.onmouseout?=?function()?{
????????????setlId?=?setInterval(Up,?time);
????????}
????</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的js文字无限循环向上滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 灰色预测的MATLAB代码
- 下一篇： 数据分析师是否是青春饭，对年龄有限制吗？