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>

JS实现公告上线滚动相关推荐

js实现公告自动滚动
html <div class="test003"><div class="test004"><div class="t ...
微信小程序：公告字幕滚动播放（文字跑马灯效果）
一.需求公告文字仅限200字公告内容仅限一行文字显示公告内容持续滚动二.解决思路使用动画API(Animation.translate),完成移动动画使用定时器API(setInterva ...
html完成公告滚动条,原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构我是公告1 我是公告2 我是公告3 我是公告4 2.css样式 body, div, ul, li { ...
vue 结合swiper插件实现广告公告上下滚动的效果
最近做到的项目里面需要广告公告上下滚动,网上也找了很多例子,效果总是不理想,所以就想着利用轮播图的竖直方向的滚动来实现这个效果一.在项目里面安装swiper插件通过npm安装: npm insta ...
Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
超链接js点击后页面向上滚动问题解决
超链接js点击后页面向上滚动问题解决 <a href="#" οnclick="fun();return false;"></a>
JS实现图片循环滚动
之前在前端的时候有遇到这样一个问题,实现 JS 图片的循环滚动,然后鼠标移入的时候停止滚动,鼠标移开继续滚动,这里无非就是设置了一个定时器,鼠标移上时清除定时器达到滚动停止的目的,鼠标移开时重设定时器 ...
分别用marquee和div+js实现首尾相连循环滚动效果
分别用marquee和div+js实现首尾相连循环滚动效果,特效代码非常精简,仅3行实现! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
js控制div内部滚动内容横向滑动位置
js控制div内部滚动内容横向滑动位置使用 js控制div内部的滚动内容横向滑动,主要应用在移动端,项目是基于angularJS,所以带有angular的点击方法ng-click,可以用原生js替换 ...

JS实现公告上线滚动

JS实现公告上线滚动相关推荐

最新文章

热门文章