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. 头文件与main函数

    头文件 1.为什么要使用头文件? 程序如戏 程序中有很多元素(std::cout, system), 都是一个个演员 但是他们之间都互不认识, 但是却要一起合作, 强行编译, 就会导致错误! 得预先介 ...

  2. Java套接字实现应用程序对数据库的访问

    最近在完成软件体系结构上机实验时,遇到一个有点点小难度的选做题,题目信息如下: 利用套接字技术实现应用程序中对数据库的访问.应用程序只是利用套接字连接向服务器发送一个查询的条件,而服务器负责对数据库的 ...

  3. Nessus-8.11.1-x64.msi安装包

    希望能给那些和我一样迷茫受挫的小伙伴们一些帮助,这玩意儿下载挺慢的,我把安装包分享出来,如果有博客园账号的,点个赞呗,CSDN那些用着别人的软件还要积分,呸! 08-18更新,截止到现在,已更新到最新 ...

  4. Dapr 集成 Open Policy Agent

    大型项目中基本都包含有复杂的访问控制策略,特别是在一些多租户场景中,例如Kubernetes中就支持RBAC,ABAC等多种授权类型.Dapr 的 中间件 Open Policy Agent 将Reg ...

  5. KVM里安装不是原装的winxp系统镜像

    从网上下载的winxp系统镜像,虽然是iso格式的,但是里面的内容是如下情况的 因此安装的话,需要采取如下步骤 1.添加一个光驱引导,挂载一个iso格式的pe 2.再添加一个光驱,挂载iso格式的wi ...

  6. C++ STL 概述_严丝合缝的合作者们

    1. 初识 STL 什么是STL? STL(Standard Template Library) 是C++以模板形式提供的一套标准库,提供了很多开发过程需要的通用功能模块.使用 STL ,可以让开发者 ...

  7. 对list集合中元素按照某个属性进行排序

    test 为集合中的元素类型(其中包含i属性) Collections.sort(list,(test o1, test o2) -> { if (o1.getI() != o2.getI()) ...

  8. 为什么阿里Java开发手册不推荐使用Timestamp

    开发手册 不推荐用java.sql.Date.java.sql.Time网上说的文章有很多. 参考文章:一文告诉你Java日期时间API到底有多烂 但为什么不推荐使用java.sql.Timestam ...

  9. esp32把玩记-④ 星星点灯 (点亮led)

    注意 全程使用Micropython,不会安装看我第一篇文章感谢 正式开始 用Thonny烧录(运行)以下代码 import time from machine import Pin led=Pin( ...

  10. java中list集合怎么判断是否为空

    首先看下面代码 @RequestMapping("/getCatlist") public String getCatlist(HttpSession session,HttpSe ...