JavaScript实现公告栏上下滚动效果


Posted in Javascript onMarch 13, 2020

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

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>公告栏上下滚动</title>
 </head>
 <style type="text/css">
 body {
 background: grey;
 }
 ul,li{list-style: none;padding: 0;margin: 0;}
 .Roll {
 padding: 0;
 text-align: left;
 text-indent: 10px;
 cursor: pointer;
 opacity: 1;
 height: 6rem;
 line-height: 3rem;
 font-size: 17px;
 background-color: #fff;
 color: #fe172d;
 }
 
 .ul li {
 background-color: #A6E1EC;
 border-radius: 20px;
 height: 2rem;
 margin: 50px auto;
 opacity: 0;
 line-height: 2rem;
 }
 </style>

 <body>
 <div class="Roll" style="overflow: hidden">
 <ul class="ul">
 <li>11111刚刚购买了一单</li>
 <li>22222刚刚购买了一单</li>
 <li>33333刚刚购买了一单</li>
 <li>44444刚刚购买了一单</li>
 <li>55555刚刚购买了一单</li>
 <li>66666刚刚购买了一单</li>
 </ul>
 </div>
 </body>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
 statr = () => { //创造一个循环方法函数
 let first = $('.ul li:first'), //获取列表第一个li
 firstLi = first.clone(); //复制第一个li
 $('.ul li').eq(0).animate({ //列表第一个添加动画,
 marginTop: '-=15px',
 opacity: '1'
 }, 2000)
 setTimeout(function() {
 $('.ul li').eq(0).animate({//列表第二个添加动画,
 marginTop: '-=15px',
 opacity: '0'
 }, 2000);
 setTimeout(function() {//动画结束后删除第一个li
 first.remove();
 }, 2000)
 $('.ul').append(firstLi)//li复制到最后面开始新的一轮循环
 },4000)
 }
 setInterval('statr()', 7000) //7秒循环一次
 </script>

</html>

更多关于滚动效果的精彩文章点击下方专题:

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

Javascript 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
Javascript条件判断使用小技巧总结
Sep 08 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
完美的js图片轮换效果
Feb 05 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 #Javascript
JavaScript实现随机点名器
Mar 25 #Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 #Javascript
JavaScript实现多个物体同时运动
Mar 12 #Javascript
基于javascript实现碰撞检测
Mar 12 #Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 #Javascript
You might like
php实现删除空目录的方法
2015/03/16 PHP
php计算一个文件大小的方法
2015/03/30 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
php生成curl命令行的方法
2015/12/14 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
javascript常用方法总结
2015/05/14 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
python实现的简单猜数字游戏
2015/04/04 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
秋季运动会活动方案
2014/02/05 职场文书
《画》教学反思
2014/04/14 职场文书
北京英文导游词
2015/02/12 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript