• 售前

  • 售后

热门帖子
入门百科

JS实现公告上线滚动结果

[复制链接]
小雨1004 显示全部楼层 发表于 2021-10-25 19:29:24 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了JS实现公告上线滚动效果的具体代码,供大家参考,具体内容如下
实现的效果如下,消息公告上下滚动。


代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
  8. <script src="./l-by-l.min.js"></script>
  9. <title>Document</title>
  10. <style>
  11.   * {
  12.    padding: 0;
  13.    margin: 0;
  14.    box-sizing: border-box;
  15.   }
  16.   .notice-news {
  17.    width: 400px;
  18.    height: 30px;
  19.    background-color: #fff;
  20.    border: 1px solid #ccc;
  21.    margin: 20px;
  22.    border-radius: 8px;
  23.    display: flex;
  24.    align-items: center;
  25.    padding: 0 10px;
  26.    overflow: hidden;
  27.   }
  28.   .hron-voice {
  29.    width: 16px;
  30.    height: 16px;
  31.    background-image: url('./horn.png');
  32.    background-repeat: no-repeat;
  33.    background-size: 100% 100%;
  34.   }
  35.   .news-list {
  36.    list-style: none;
  37.    width: 320px;
  38.    height: 18px;
  39.    font-size: 12px;
  40.    margin-left: 10px;
  41.    overflow: hidden;
  42.    /* transition: all .5s linear; */
  43.   }
  44.   .news-list li {
  45.    width: 100%;
  46.    overflow: hidden;
  47.    white-space: nowrap;
  48.    text-overflow: ellipsis;
  49.   }
  50.   
  51. </style>
  52. </head>
  53. <body>
  54. <div class="notice-news">
  55.   <div class="hron-voice"></div>
  56.   <ul class="news-list">
  57.    <li>HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。</li>
  58.    <li>JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。</li>
  59.    <li>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</li>
  60.    <li>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。</li>
  61.   </ul>
  62. </div>
  63. </body>
  64. <script type="text/javascript">
  65. $(function () {
  66.   setInterval(function () {
  67.    $('.news-list').animate({
  68.     marginTop: '-50px'
  69.    }, 2000, function () {
  70.     $(this).css({ marginTop: "0px" });
  71.     var li = $(".news-list").children().first().clone()
  72.     $(".news-list li:last").after(li);
  73.     $(".news-list li:first").remove();
  74.    })
  75.   }, 3000)
  76. })
  77. </script>
  78. </html>
复制代码
以上就是本文的全部内容,盼望对大家的学习有所帮助,也盼望大家多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作