html代码

  1. <div id="scroll">
  2. <div id="con1">
  3. <p style="color: red;">文字1111111</p>
  4. <p>文字22222</p>
  5. <p>文字33333</p>
  6. <p>文字44444</p>
  7. <p>文字55555</p>
  8. <p>文字66666</p>
  9. <p>文字77777</p>
  10. <p>文字88888</p>
  11. <p>文字99999</p>
  12. <p>文字101010</p>
  13. </div>
  14. <div id="con2"></div>
  15. </div>
  16. <style>
  17. #scroll{
  18. width: 300px;
  19. height: 210px; /*这个高度要保证小于等于con1的高度*/
  20. overflow: hidden;
  21. }
  22. </style>

js代码

  1. <script>
  2. var time = 60; // 滚动间隙
  3. var box = document.getElementById('scroll'); // 获取父元素
  4. var con1 = document.getElementById('con1');
  5. var con2 = document.getElementById('con2');
  6. con2.innerHTML = con1.innerHTML;
  7. function Up() {
  8. if (box.scrollTop >= con1.offsetHeight) {
  9. box.scrollTop = 0;
  10. } else {
  11. box.scrollTop+=1;
  12. }
  13. }
  14. var setlId = setInterval(Up, time);
  15. //鼠标移上父元素时清除定时器
  16. box.onmouseover = function() {
  17. clearInterval(setlId);
  18. }
  19. //鼠标离开父元素时触发事件
  20. box.onmouseout = function() {
  21. setlId = setInterval(Up, time);
  22. }
  23. </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. js中的对象和数组的创建

    <!DOCTYPE html><html><head> <title>获取控制</title> <meta charset=" ...

  2. Docker安装MySQL并使用Navicat连接

    MySQL简单介绍: MySQL 是一个开放源码的关系数据库管理系统,开发者为瑞典 MySQL AB 公司.目前 MySQL 被广泛地应用在 Internet 上的大中小型网站中.由于其体积小.速度快 ...

  3. Django 之复制粘贴必备命令(补)

    一.Django 常用命令 pip install django==3.2 pip show django pip list django-admin startproject mysite pyth ...

  4. Form表单数据

    官方文档地址:https://fastapi.tiangolo.com/zh/tutorial/request-forms/ 接收的不是 JSON,而是表单字段时,要使用 Form 要使用表单,需预先 ...

  5. Kibana:如何让用户匿名访问 Kibana 中的 Dashboard

    文章转载自:https://elasticstack.blog.csdn.net/article/details/118152293 有一个很好的 Dashboard,我们想分析这个 Dashboar ...

  6. Elastic: 创建一个 Elastic 邮件警报 - 7.7 发行版

    文章转载自:https://blog.csdn.net/UbuntuTouch/article/details/106185321 总结: 1.elastic 免费版只有发送警报到一个索引或者到Ser ...

  7. Alertmanager结合Slack使用

    Slack作为一款即时通讯工具,协作沟通主要通过Channel(平台)来完成,用户可以在企业中根据用途添加多个Channel,并且通过Channel来集成各种第三方工具. 例如,我们可以为监控建立一个 ...

  8. My life of Honker Security Commando

    红客突击队 && 红客突击分队 红客突击队,于2019年,由队长k龙联合国内多位顶尖高校研究生牵头成立.其团队从成立至今多次参加国际网络安全竞赛并取得良好成绩,积累了丰富的竞赛经验.团 ...

  9. Oracle基础知识汇总一

    Oracle基础知识 以下内容为本人的学习笔记,如需要转载,请声明原文链接   https://www.cnblogs.com/lyh1024/p/16720759.html oracle工具: SQ ...

  10. 研一入坑Go 文件操作

    1 package main 2 3 import ( 4 "fmt" 5 "os" 6 "path" 7 "path/filep ...