请选择 进入手机版 | 继续访问电脑版

编程365

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 42|回复: 0

js上下文字滚动代码

[复制链接]

56

主题

58

帖子

2192

积分

管理员

硬汉工作室创始人

Rank: 9Rank: 9Rank: 9

积分
2192
QQ
发表于 2019-2-15 23:26:23 | 显示全部楼层 |阅读模式
就是每隔几秒,文字向上滚动,纯js实现的。一般用来做新闻啊或者公告啥的,很常用,记下来,反正自己也写不出来。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .llx-announce #div2 {
  8.         height: 22px;
  9.         overflow: hidden;
  10.         }
  11.         .llx-announce a {
  12.             overflow: auto;
  13.             display: block;
  14.             line-height: 22px;
  15.             text-decoration: none;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <div class="llx-announce">
  21.     <div id="div2">
  22.         <a href="#">这是标题一</a>
  23.         <a href="#">这是标题二</a>
  24.         <a href="#">这是标题三</a>
  25.     </div>
  26. </div>
  27. <script>
  28.     var box = document.getElementById("div2"), can = true;
  29.     box.innerHTML += box.innerHTML;
  30.     box.onmouseover = function () {
  31.         can = false
  32.     };
  33.     box.onmouseout = function () {
  34.         can = true
  35.     };
  36.     new function () {
  37.         var stop = box.scrollTop % 22 == 0 && !can;
  38.         if (!stop) box.scrollTop == parseInt(box.scrollHeight / 2) ? box.scrollTop = 0 : box.scrollTop++;
  39.         setTimeout(arguments.callee, box.scrollTop % 22 ? 10 : 3000);
  40.     };
  41. </script>
  42. </body>
  43. </html>
复制代码


Discuz插件商店:http://addon.discuz.com/?@56030.developer
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|编程365 ( 冀ICP备13021567号-5 )

GMT+8, 2019-3-19 01:28 , Processed in 0.069386 second(s), 28 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表