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文字无限循环向上滚动的更多相关文章

  1. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  2. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  3. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

  4. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  5. js 循环向上滚动

    aaaaaaaaaaaaaaaaa最开头 aaaaaaaaaaa 1 aaaaaaaaaaa 2 aaaaaaaaaaa 3 aaaaaaaaaaa 4 aaaaaaaaaaa 5 aaaaaaaaa ...

  6. JS文字特效:彩色滚动变幻效果,只适合少量的文字。(过多对页面有影响)

    JS代码如下: 代码具体是在哪里的我不知道但是我的有道云上有.如有哪位朋友知道,还望联系下,添加出处. <div id="chakhsu"></div> & ...

  7. 原生js文字标签云上下滚动播放

    效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...

  8. 用CSS3实现无限循环的无缝滚动

    有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...

  9. iOS无限循环滚动scrollview

    经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播.没看过其他iOS图片无限轮播 ...

  10. AlloyTouch之无限循环select插件

    写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项.让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动.00ms和01ms是无缝链接 ...

随机推荐

  1. MySQL数据备份 mysqldump 详解

    MySQL数据备份流程 1 打开cmd窗口 通过命令进行数据备份与恢复: 需要在Windows的命令行窗口中进行: l 开始菜单,在运行中输入cmd回车: l 或者win+R,然后输入cmd回车,即可 ...

  2. Fluentd部署:系统配置

    Fluentd的全局配置项,诸如开启RPC.使用多worker模式等.可在配置文件中通过<system>进行配置,或通过命令行进行配置. 参数 workers:指定worker进程数,默认 ...

  3. #css#如何使用hover,实现父对子的样式改变?

    思路及做法: 鼠标移动到父盒子的时候, 里面所有的子盒子的样式都发生变化的, 只需要直接在hover后面加上空格, 并且加上子盒子的类名 ,里面再写其他样式 .父盒子的类名:hover .子盒子的类名 ...

  4. Elasticsearch from/size-浅分页查询-深分页 scroll-深分页search_after深度查询区别使用及应用场景

    Elasticsearch调研深度查询 1.from/size 浅分页查询 一般的分页需求我们可以使用from和size的方式实现,但是这种的分页方式在深分页的场景下应该是避免使用的.深分页的页次增加 ...

  5. MySQL学习(2)---MySQL数据类型

    ps:此随笔基于mysql 5.7.*版本. 补充: UNSIGNED:所有整数类型都可以有一个可选(非标准)UNSIGNED属性.无符号类型可用于在列中仅允许非负数存在,或者当开发者需要该列的较大数 ...

  6. Mysql 数据库SQL脚本导入

    1.进入mysql命令行窗口 mysql -uroot -p123456 2.展示所有数据库 show databases: 3.选择数据库 use 数据库名 4.展示选择的数据库中所有表 show ...

  7. Python函数-2V2

    一.导入 $$ f ( x , y ) = 2 x + 3 y $$ 上面括号里面的就是数学公式里的自变量,自变量就相当于函数里的参数. 二.为什么要有参数 如果一个大楼里有两种尺寸不一的窗户,显然在 ...

  8. Linux-->文件目录作用查询

    Linux的目录结构 在Linux中他的根目录都是决定好的无法改名,并且每一个目录他的作用都是决定好的 在Linux中一切都是文件!,Linux会把所有的硬件都映射成文件 / 代表根目录 /bin / ...

  9. C# Linq 查询汇总

    分组取值.求和.计数 1 var resultlist = orderllist.GroupBy(oo => new { oo.Deptname, oo.Userid, oo.Username ...

  10. 三十一、kubernetes网络介绍

    Kubernetes 网络介绍 Service是Kubernetes的核心概念,通过创建Service,可以为一组具有相同功能的容器应用提供一个统一的入口地址,并且将请求负载分发到后端的各个容器应用上 ...