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中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
深入解析koa之异步回调处理
Jun 17 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python访问sqlserver示例
2014/02/10 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
合作合同协议书范本
2015/01/27 职场文书
市场总监岗位职责
2015/02/11 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL