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 写类方式之七
Jul 05 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
纯js实现手风琴效果
Apr 17 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 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
drupal 代码实现URL重写
2011/05/04 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
分享Python字符串关键点
2015/12/13 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
用python对excel查重
2020/12/07 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
建筑工地门卫岗位职责
2014/04/30 职场文书
校园活动策划方案
2014/06/13 职场文书
供电工程专业求职信
2014/08/09 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书