原生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),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
随机推荐
- python的函数定义中99%的人会遇到的一个坑
列表是一种经常使用的数据类型.在函数的定义中,常常会使用列表作为参数. 比如,要测试一个接口的数据,接口返回的数据格式如下: { "code": "20000" ...
- 洛谷——P2758 编辑距离
P2758 编辑距离 题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作共有三种: 1.删除一个字符: 2.插入一个字符: 3.将一个字符改为另一 ...
- Node 入门<1>
1. Node JavaScript web服务器框架,主要特点:事件驱动,异步 I/O,强制不共享任何资源的单线程,单进程系统. 每一个node进程都构成网络应用中的一个节点. ...
- Linux命令之ps
ps [选项] 报告当前进程状态.ps显示有关选择的活动进程的信息.如果要重复更新选择和显示的信息,请使用top.ps命令可以搭配kill随时中断.删除不必要的程序.ps命令是最基本同时也是非常强大的 ...
- ASP.NET Core 2.2 基础知识(九) 使用托管服务实现后台任务
在 ASP.NET Core 中,后台任务作为托管服务实现.托管服务是一个类,而且必须实现 IHostedService 接口,该接口定义了两个方法: StartAsync(CancellationT ...
- python中json与dict之间转换
Python之dict(或对象)与json之间的互相转化 在Python语言中,json数据与dict字典以及对象之间的转化,是必不可少的操作. 在Python中自带json库.通过import js ...
- 微信小程序退款【证书的使用】
1,官方文档的地址 2,在官方文档中给出了证书使用的链接,如下: [其实只有证书的获取,选择.具体的证书怎么在代码中使用,文档中并没有给出说明] 3,第一步准备请求的参数,里面只有五个是参数是有点特殊 ...
- python的turtle模块画折线图
代码如下: import turtle yValues = [10.0,7.4,6.4,5.3,4.4,3.7,2.6] def main(): t = turtle.Turtle() t.hidet ...
- JavaScript字符串api简单说明
1.可返回指定位置的字符 stringObject.charAt(index); 2.返回的是位于指定位置的字符的编码 stringObject.charCodeAt(index); 3.用于连接两个 ...
- Android中关闭DatePicker和NumberPicker等Picker类的可编辑模式
DatePicker.TimePicker.NumberPicker等控件在由于默认是可编辑的,所以会经常跳出键盘.要屏蔽这些编辑模式只需要如下代码: picker.setDescendantFocu ...