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 相关文章推荐
extjs3 combobox取value和text案例详解
Feb 06 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
多种方式实现js图片预览
Dec 12 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
angular 服务随记小结
May 06 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
239军机修复记
2021/03/02 无线电
php更新修改excel中的内容实例代码
2014/02/26 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
微信支付开发订单查询实例
2016/07/12 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
解析Python中的__getitem__专有方法
2016/06/27 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python 复平面绘图实例
2019/11/21 Python
Python基于WordCloud制作词云图
2019/11/29 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
平面设计师岗位职责
2014/09/18 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
创业计划书之养殖业
2019/10/11 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技