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. 如何使用 Git 管理配置文件

    现在很多软件的配置都可以在线同步或者支持导入导出,可以很方便的在不同设备上使用.但电脑上还有很多本地配置文件没有办法同步,夸多个设备使用时很难保持一致,换电脑也很麻烦.其实可以使用 Git 来管理这些 ...

  2. 9个常用的Shell脚本

    1.Dos 攻击防范(自动屏蔽攻击 IP) #!/bin/bash DATE=$(date +%d/%b/%Y:%H:%M) LOG_FILE=/usr/local/nginx/logs/demo2. ...

  3. PAT (Basic Level) Practice 1009 说反话 分数 20

    给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过 80 的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小 ...

  4. Qemu/Limbo/KVM镜像:Ubuntu Mate 22.04+Wine 7.8

    链接: https://pan.baidu.com/s/1cf2c_ylu7-SUaYl8ddztog 提取码: b9mi 密码 空格 手机推荐使用termux里面的Qemu运行,速度最快. 镜像特征 ...

  5. Springboot 之 HandlerMethodReturnValueHandler 运用

    简介 现在项目中大部分采用前后端分离的架构,采用这种架构的项目,在返回数据时,几乎都是采用返回 json 格式的数据.而 spring 中返回 json 格式的数据一般采用 @RestControll ...

  6. Spring让人眼前一亮的11个小技巧

    前言 我们一说到spring,可能第一个想到的是 IOC(控制反转) 和 AOP(面向切面编程). 没错,它们是spring的基石,得益于它们的优秀设计,使得spring能够从众多优秀框架中脱颖而出. ...

  7. POJ3041 小行星 (二分图匹配模板)

    学了这么久连模板都没有写过,我来补个坑...... 将行看成集合X,列看成Y,障碍看成是X到Y的一条边. 消除次数最少,等价于最小点覆盖问题,最小点覆盖=最大匹配数,跑一遍匈牙利就行了 #includ ...

  8. HDU2844 Coins(多重背包)

    多重背包就是每种物品有数量限制时求解最大价值. 如果一种物品数量和重量之积超过背包容量,可视为完全背包:其余情况通过二进制拆分,将几个数量的物品看成一个,转化为01背包求解. 按照这种思路代码是这样的 ...

  9. Java学习之路:运算符

    2022-10-10 10:34:08 1 运算符 算术运算符:+, -, *, /, %, ++, -- 赋值运算符:= 关系运算符:>, <, >=, <=, ==, != ...

  10. Linux基础_3_文件/文件夹权限管理

    注:权限遮罩码: 控制用户创建文件和文件夹的默认安全设置,文件默认权限为666-umask的值,文件夹默认权限为777-umask的值. root默认0022,普通用户默认0002. 文件的默认权限不 ...