js文字无限循环向上滚动

<!doctype html>

<html>

<head>

<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>

<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>

</div>

</div>

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文字无限循环向上滚动相关推荐

原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
d3.js transition无限循环
d3.js transition无限循环利用d3.js的 transition实现无限循环.在循环结束后添加一个回调,无限循环就回调自己就可以了.·.on('end,funame),.下面通过d3在 ...
示例演示公告通知标题无缝向上滚动，文字段落无缝向上滚动，简单的wangeditor富文本编辑器，简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...
html5图片无限循环播放,原生js实现无限循环轮播图效果
知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offs ...
android开发实例之viewpager无限循环+自动滚动,Android ViewPager实现无限循环的实例...
Android ViewPager实现无限循环的实例 ViewPager自身并不支持左右无限循环的功能,这里就提供一种方案让Android ViewPager实现左右无限循环的功能,这里记录下: 用于 ...
CSS实现图片无限循环无缝滚动
实现代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
table表格数据无缝循环向上滚动，hover后暂停滚动
先来效果图: 直接复制代码到vue就好了 <template><div class="listDiv"><div class="tableD ...
html图片墙无限滚动,尝试用CSS3实现无限循环的无缝滚动
有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)?克隆A一份完全一样的数据B放在原数据A的后面: 使用setInt ...
用CSS3实现无限循环的无缝滚动
有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...

js文字无限循环向上滚动

js文字无限循环向上滚动相关推荐

最新文章

热门文章