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是无缝链接 ...
随机推荐
- 一文学会Spring JDBC 使用
Spring JDBC 1.JDBC JDBC 就是 数据库开发 操作的 代名词,因为只要是现代商业项目的开发那么一定是离不开 数据库 的,不管你搞的是什么,只要是想使用动态的开发结构,那么一定就是 ...
- .NET 反向代理-YARP 根据域名转发
前段时间发布过一个关于 YARP 的简单介绍,感兴趣的小伙伴恭请移步看看 .NET 反向代理-YARP - 一事冇诚 - 博客园 (cnblogs.com) 作为反向代理,必不可少的当然是根据域名代理 ...
- 聊聊asp.net core 授权流程
在上一篇 聊聊 asp.net core 认证和授权 中我们提到了认证和授权的基本概念,以及认证和授权的关系及他们之间的协同工作流程,在这篇文章中,我将通过分析asp.net core 3.1 授权流 ...
- ProxySQL(9):ProxySQL的查询缓存功能
文章转载自: https://www.cnblogs.com/f-ck-need-u/p/9314459.html ProxySQL支持查询缓存的功能,可以将后端返回的结果集缓存在自己的内存中,在某查 ...
- Java容器化参数配置最佳实践
Java是以VM为基础的,而云原生讲究的就是Native,天然的矛盾,虽然Quarkus是为GraalVM和HotSpot量身定制的K8s Native Java框架,生态原因切换成本太高,这种矛盾体 ...
- Solutions:如何运用Elastic App Search快速建立出色的React搜索体验
建立搜索体验是一项艰苦的工作. 乍一看似乎很容易:建立一个搜索栏,将数据放入数据库,然后让用户输入对该数据库的查询. 但是,在数据建模,底层逻辑以及(当然)总体设计和用户体验方面,有很多事情要考虑. ...
- Alermanager_template,email
default.tmpl {{ define "__subject" }}[{{ .Status | toUpper }}{{ if eq .Status "firing ...
- Windows界面个人常用快捷键
分享一下个人常用快捷键. 说明:字母排序规则遵循字母表(a->z) 快捷键 介绍 windows+d 由当前应用直接返回桌面,再按一次回到应用 windows+e 打开文件资源管理器 windo ...
- git-secret:在 Git 存储库中加密和存储密钥(上)
当涉及处理机密信息(如密码.令牌.密钥文件等)等,以下问题值得考虑: 安全性十分重要,但高安全性往往伴随着高度的不便. 在团队中,共享某些密钥有时无法避免(因此现在我们需要考虑在多人之间分发和更新密钥 ...
- Springboot集成阿里云短信
目录 1 前言 2 准备工作 2.1 了解流程 2.2 配置信息 2.3 短信签名和模板 2.3.1 签名 2.3.2 模板 2.3.3 存入数据库 3 SDK 4 集成Springboot 4.1 ...