原生js实现文字无缝向上滚动效果

在网上查找到了一个实现文字无缝向上滚动效果的源码，结果发现运行有问题，于是就稍加改动，实现了js无缝向上滚动的效果。

<script>window.onload = roll(50);        function roll(t) {var ul1 = document.getElementById("ul1");var ul2 = document.getElementById("ul2");var box = document.getElementById("broadcast"); ul2.innerHTML = ul1.innerHTML; box.scrollTop = 0; var timer = setInterval(rollStart, t); box.onmouseover = function () { clearInterval(timer) } box.onmouseout = function () { timer = setInterval(rollStart, t); } } function rollStart() { if (document.getElementById("broadcast").scrollTop >= document.getElementById("ul1").scrollHeight) { document.getElementById("broadcast").scrollTop = 0; } else { document.getElementById("broadcast").scrollTop++; } } </script>

转载于:https://www.cnblogs.com/imustun/p/9399740.html

原生js实现文字无缝向上滚动效果相关推荐

原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
html文字整体向上滚动代码,js实现文字无缝向上滚动
静态效果如下:(动态效果复制粘贴下面代码可见) 代码如下: *{ padding: 0; margin:0; } ul,li{ list-style: none } .scroll { height: ...
html table表格无缝向上滚动效果,js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
jQuery无缝向上滚动效果
该篇通过js和jquery两种写法来实现内容无缝向上滚动的一个效果,废话不多说,直接上代码 (1)向上滚动 HTML: <div id="demo" style=" ...
简单的jQuery无缝向上滚动效果
简介这是一个基于 jQuery 的简单的向上滚动效果插件,代码很少,功能也比较单一,可用于文字或图片滚动,鼠标移动到上面会暂停滚动.功能虽然单一,不过一般情况下也够用了,而且还很小巧. 兼容兼容所 ...
java把字体做成滚动的_Scroll text - JS实现文字自动循环滚动效果
//scrollBodyId: String 内部滚动div的id //scrollBoxId: String 外面限制div的id //showHeight: Int 限制显示高度 //sho ...
关于文字向上滚动效果
1.文字无缝向上滚动 <div class="tui-new-apply clearfix"><span>[最新资讯]</span><ul ...
基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <h ...
示例演示公告通知标题无缝向上滚动，文字段落无缝向上滚动，简单的wangeditor富文本编辑器，简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...

原生js实现文字无缝向上滚动效果

原生js实现文字无缝向上滚动效果相关推荐

最新文章

热门文章