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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
JS原型链怎么理解
Jun 27 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
微信小程序排坑指南详解
May 23 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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 file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
python实现Floyd算法
2018/01/03 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
解决Python使用列表副本的问题
2019/12/19 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
服务之星获奖感言
2014/01/21 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python