原生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),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
随机推荐
- Java的位运算符与二进制转换
转换: Java整型数据类型有:byte.char.short.int.long.要把它们转换成二进制的原码形式,必须明白他们各占几个字节.,一个字节==8位数 数据类型 ...
- AMQ学习笔记 - 08. Spring-JmsTemplate之发送
概述 JmsTemplate提供了3组*3,共计9个发送用的方法. 发送的方法有3组: 基本的发送 转换并发送 转换.后处理再发送 必需的资源 必需的资源有: javax.jms.Connecti ...
- HDU 1166 敌兵布阵 <线段树 单点修改 区间查询>
敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- [CF414E]Mashmokh's Designed Problem
题意:给一棵树,有三个操作:①询问两点$(x,y)$之间的距离②把$x$和原来的父亲断开并连到它的$h$级祖先,作为新父亲最右的儿子③询问与根节点距离为$k$的点中最右的点是哪个点 用出栈入栈序$s_ ...
- python3开发进阶-Django框架的ORM常用字段和参数
阅读目录 常用字段 字段合集 自定义字段 字段参数 关系参数 多对多的关联关系的三种方式 一.常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中 ...
- C# 二维码扫描
Zint类用于产生二维码.https://sourceforge.net/projects/zint/ Zxing类用于读取二维码. https://github.com/zxing/zxing AF ...
- Scala实战高手****第10课:Scala继承彻底实战和Spark源码鉴赏
isInstanceOf 和 asInstanceOf is用于判断 as用于转换,把父类类型转换成子类类型 getClass 具体找出类型
- Java生成扫描可以生成手机号名片的二维码
(1)需求:用户通过扫描pc端网站后台管理系统的二维码获取对接人的相关信息,主要是是手机号信息,达到点击可以直接打电话或者将对接人的信息直接保存到通讯录 注:源码来源:https://blog.csd ...
- 在iPhone上取消APP订阅
1.在iPhone上打开APP Store,在精品推荐那个界面滚动到底部. 2.点击Apple ID那一栏,如图: 3.点击查看Apple ID,如图: 4.点击管理,如图: 5.关掉此选项,如图: ...
- 【转载】网络攻击技术(三)——Denial Of Service & 哈希相关 & PHP语言 & Java语言
找到了这个系列的原始作者: http://www.cnblogs.com/rush/archive/2012/02/05/2339037.html 最近网络安全成了一个焦点,除了国内明文密码的安全事件 ...