JS实现公告上线滚动效果


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了JS实现公告上线滚动效果的具体代码,供大家参考,具体内容如下

实现的效果如下,新闻公告上下滚动。

JS实现公告上线滚动效果

JS实现公告上线滚动效果

代码:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
 <script src="./l-by-l.min.js"></script>
 <title>Document</title>
 <style>
  * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
  }

  .notice-news {
   width: 400px;
   height: 30px;
   background-color: #fff;
   border: 1px solid #ccc;
   margin: 20px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   padding: 0 10px;
   overflow: hidden;

  }

  .hron-voice {
   width: 16px;
   height: 16px;
   background-image: url('./horn.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
  }

  .news-list {
   list-style: none;
   width: 320px;
   height: 18px;
   font-size: 12px;
   margin-left: 10px;
   overflow: hidden;
   /* transition: all .5s linear; */
  }

  .news-list li {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
  }

  
 </style>
</head>

<body>
 <div class="notice-news">
  <div class="hron-voice"></div>
  <ul class="news-list">
   <li>HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。</li>
   <li>JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。</li>
   <li>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</li>
   <li>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。</li>
  </ul>
 </div>
</body>

<script type="text/javascript">
 $(function () {
  setInterval(function () {
   $('.news-list').animate({
    marginTop: '-50px'
   }, 2000, function () {
    $(this).css({ marginTop: "0px" });
    var li = $(".news-list").children().first().clone()
    $(".news-list li:last").after(li);
    $(".news-list li:first").remove();
   })
  }, 3000)
 })
</script>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
Javascript 面试题随笔
Mar 31 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
原生JavaScript实现轮播图
Jan 10 #Javascript
原生JavaScript实现留言板
Jan 10 #Javascript
JavaScript实现点击切换验证码及校验
Jan 10 #Javascript
JavaScript canvas实现雨滴特效
Jan 10 #Javascript
You might like
PHP strtotime函数详解
2009/12/18 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
轻松实现php文件上传功能
2017/02/17 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
使用pdb模块调试Python程序实例
2015/06/02 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python中lambda()的用法
2017/11/16 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Python函数返回不定数量的值方法
2019/01/22 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python 三元运算符使用解析
2019/09/16 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
SQL数据库笔试题
2016/03/08 面试题
大二学生职业生涯规划书
2014/02/05 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
MySQL表字段时间设置默认值
2021/05/13 MySQL
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python