在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了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>
 

原生js实现文字无缝向上滚动效果的更多相关文章

  1. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  2. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  3. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  4. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  5. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  6. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  7. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  8. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  9. 原生JS、CSS实现的转盘效果(目前仅支持webkit)

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

随机推荐

  1. summernote文本编辑内容在前端的显示

    1.summernote文本的编辑与文件的上传 在上一篇文章中,我们写了summernote文本编辑器的使用还有图片文件的上传,http://www.cnblogs.com/jingmin/p/659 ...

  2. Apache用户目录枚举工具apache-users

     Apache用户目录枚举工具apache-users Apache服务器提供UserDir模块,允许在网站为不同的用户设置对应的目录.这样,用户可以使用http://example.com/~use ...

  3. 【树状数组】Gym - 101147J - Whistle's New Car

    题意就是对每个点i,统计在其子树内(不含自身),且depj-depi<=xj的点有多少个. 把点分别按照dep-x和dep进行排序,离线处理, 每次把dep-x小于等于当前dep值的点插入树状数 ...

  4. 【矩阵乘法】图中长度为k的路径的计数

    样例输入 4 2 0 1 1 0 0 0 1 0 0 0 0 1 1 0 0 0 样例输出 6 #include<cstdio> #include<vector> using ...

  5. 【记忆化搜索】bzoj1048 [HAOI2007]分割矩阵

    标准差=√(Σ(xi-xba)2/n)=Σ(xi)2+xba*n-2*xba*sum.只需最小化每个分割出来的矩阵的平方和即可. #include<cstdio> #include< ...

  6. 【网络流】【Dinic】【Next Array】Dinic模板

    注意:有时加边不一定要加反向弧. Next Array版. #include<cstdio> #include<cstring> #include<algorithm&g ...

  7. iOS 修改APP工程名字

    我们在iOS开发中,难免会遇到项目做到一半要改名字的情况.如果项目名差的太大,工程名看起来总是不舒服的,就会想着为工程改个贴切的名字,那么你就为用到本文记录的内容. 如何修改工程名呢? 下面我就拿一个 ...

  8. Java杂谈5——关键字final与volatile

    Final关键字 在Java语言中,随着语境的不同final关键字所代表的语义会有一些细微的差异.总的来说,final关键字表达的含义是“禁止修改”,这层有点类似于C++中的const关键字.之所以要 ...

  9. 使用ReadOnlyCollection创建只读集合

    转载:http://www.cnblogs.com/abatei/archive/2008/02/04/1064102.html 使用泛型创建只读集合 问题 您希望类中的一个集合里的信息可以被外界访问 ...

  10. <command-line>:0: error: macro names must be identifiers

    编译时的出错信息:<command-line>:0: error: macro names must be identifiers 原因: You have a -D flag with ...