原生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>
原生js实现文字无缝向上滚动效果的更多相关文章
- jquery插件之文字无缝向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...
- 利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
- vue文字间歇无缝向上滚动
公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...
- Expression Blend4经验分享:文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- js文字展示各种滚动效果
js文字展示各种滚动效果:http://www.dowebok.com/demo/188/
- 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- 原生JS、CSS实现的转盘效果(目前仅支持webkit)
这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
随机推荐
- Opencv利用Mat访问像素值
如果是采用Mat形式存储,想要访问灰度图像的灰度值,可以采用如下方法: 如果是彩色图像,采用如下方法: 说明: 其中gray_value中存放灰度值,image是读入的图像,i表示行,j表示列: co ...
- 2018 ACM-ICPC 南京网络赛
Problem A Problem B Problem C Problem D Problem E Problem F Problem G Problem H Problem I Problem J ...
- AOJ 2266 Cache Strategy(费用流)
[题目链接] http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=2266 [题目大意] 有M个桶,N个球,球编号为1到N,每个球都有重量 ...
- hdu2829 四边形优化dp
Lawrence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- 使用ASP.Net WebAPI构建REST服务(七)——调试工具
由于WebAPI本身是基于HTTP协议的,在开发过程中,我们可以使用浏览器或Fiddler等HTTP工具辅助开发.与此同时,微软也提供了一些工具方便我们调试,使得开发更加简单快捷,本文就简单的介绍一下 ...
- 【教训】 form表单提交时,action url中参数无效
今天提交一个表单,内容参考如下: <form action="add.php?a=123&b=456"> <input type="hi ...
- 7zip File: How to Uncompress 7z files on Ubuntu, Debian, Fedora
转:http://www.thegeekstuff.com/2010/04/7z-7zip-7za-file-compression/ Question: How do I uncompress a ...
- 【POI】修改已存在的xls,新添一列后,再保存本文件+获取最大有效行号+获取单元格内容
使用POI版本: ① ② ③ ④ package com.poi.dealXlsx; import java.io.File; import java.io.FileInputStream; impo ...
- java 的 &和&&的区别
public class Test { public static void main(String[] args) { String str = null; if(str != null & ...
- 大数据的开始:安装hadoop
为实现全栈,从今天开始研究Hadoop,个人体会是成为某方面的专家需要从三个方面着手 系统化的知识(需要看书或者比较系统的培训) 碎片化的知识(需要根据关注点具体的深入的了解) 经验的积累(需要遇到问 ...