js文字无限循环向上滚动
html代码
<div id="scroll">
<div id="con1">
<p style="color: red;">文字1111111</p>
<p>文字22222</p>
<p>文字33333</p>
<p>文字44444</p>
<p>文字55555</p>
<p>文字66666</p>
<p>文字77777</p>
<p>文字88888</p>
<p>文字99999</p>
<p>文字101010</p>
</div>
<div id="con2"></div>
</div>
<style>
#scroll{
width: 300px;
height: 210px; /*这个高度要保证小于等于con1的高度*/
overflow: hidden;
}
</style>
js代码
<script>
var time = 60; // 滚动间隙
var box = document.getElementById('scroll'); // 获取父元素
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML = con1.innerHTML;
function Up() {
if (box.scrollTop >= con1.offsetHeight) {
box.scrollTop = 0;
} else {
box.scrollTop+=1;
}
}
var setlId = setInterval(Up, time);
//鼠标移上父元素时清除定时器
box.onmouseover = function() {
clearInterval(setlId);
}
//鼠标离开父元素时触发事件
box.onmouseout = function() {
setlId = setInterval(Up, time);
}
</script>
js文字无限循环向上滚动的更多相关文章
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- vue文字间歇无缝向上滚动
公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...
- jquery插件之文字间歇自动向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...
- js实现文字列表无缝向上滚动
body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...
- js 循环向上滚动
aaaaaaaaaaaaaaaaa最开头 aaaaaaaaaaa 1 aaaaaaaaaaa 2 aaaaaaaaaaa 3 aaaaaaaaaaa 4 aaaaaaaaaaa 5 aaaaaaaaa ...
- JS文字特效:彩色滚动变幻效果,只适合少量的文字。(过多对页面有影响)
JS代码如下: 代码具体是在哪里的我不知道但是我的有道云上有.如有哪位朋友知道,还望联系下,添加出处. <div id="chakhsu"></div> & ...
- 原生js文字标签云上下滚动播放
效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...
- 用CSS3实现无限循环的无缝滚动
有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...
- iOS无限循环滚动scrollview
经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播.没看过其他iOS图片无限轮播 ...
- AlloyTouch之无限循环select插件
写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项.让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动.00ms和01ms是无缝链接 ...
随机推荐
- ProxySQL SSL 配置
后端 SSH 连接配置 从版本 v1.2.0e 开始,ProxySQL 支持对后端使用 SSL 连接. 重要提示: 仅支持 v1.x 中的后端 SSL.在 v2.x 之前的版本中,客户端是无法使用 S ...
- 阿里云SLB的http强制转https
公司的要求:要求强制http转https 我的环境是: 域名<--->slb的ip<-->源服务器nginx 具体做法是: 第一步:证书放到slb的https上,通过443端口 ...
- kubernetes为容器定义环境变量
示例Pod 的配置文件 envars.yaml Copy envars.yaml to clipboard apiVersion: v1 kind: Pod metadata: name: envar ...
- 关于Loki中promtail组件收集日志的几点思考
promtail组件是采用docker方式运行的,配置文件也是在docker容器中,宿主机中没有挂载点,这就有问题了. 宿主机中没有挂载配置文件,也就没法修改,登录promtail的docker容器中 ...
- prettierrc格式化常用配置
#最大长度 printWidth: 140 #单引号 singleQuote: true tabWidth: 2 useTabs: false # 句尾添加分号 semi: false # js an ...
- IC入门课第五课作业:完善 Microblog 前端(1、显示发布者的名字;2、增加新UI、3、关注其他学员的 canister)
上周完成了 IC 入门课程第五课的作业 现将答案贴出,欢迎同学们参考,禁止抄袭作业哦 课程作业 (完善 microblog 前端) 1. 显示消息的发布者名字 a. 给 Message 增加 auth ...
- ImGUI 1.87 绘制D3D外部菜单
ImGUI 它是与平台无关的C++轻量级跨平台图形界面库,没有任何第三方依赖,可以将ImGUI的源码直接加到项目中使用,该框架通常会配合特定的D3Dx9等图形开发工具包一起使用,ImGUI常用来实现进 ...
- 「Tubian」Tubian0.41!支持Windows QQ微信!
Tubian 0.42已发布:https://www.cnblogs.com/tubentubentu/p/16745926.html Sourceforge.net下载:https://source ...
- SECS半导体设备通讯-2 HSMS通信标准
一 HSMS通信标准概述 HSMS定义了使用 TCP/IP 作为物理传输媒质时的通信接口. HSMS使用TCP/IP流支持,提供了可靠的双向同步传输,可以用来作为SECS-I通信以及其他更高级的通信环 ...
- C#-7 结构和枚举
一 什么是结构 结构是程序员定义的数据类型,有数据成员和函数成员,和类非常类似. 类是引用类型,而结构是值类型: 结构和类一样可以实现接口: 结构是隐式密封的,不能被派生: 结构类型的变量不能为nul ...