利用10行js代码实现上下滚动公告效果


Posted in Javascript onDecember 08, 2017

需求

在最近的项目中需要实现公告栏滚动显示效果如下:

利用10行js代码实现上下滚动公告效果

解决方案

1、 HTML

先建一个div层作为公告显示区,里面包裹一个公告列表(ul);

<div class="notice">
 <ul>
 <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li>
 <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li>
 <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li>
 <li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li>
 </ul>
</div>

2、 CSS

固定公告栏显示区域的高度(35px),每条公告信息(li)的高度也必须是这个高度(我这里偷懒就用了行高),后面js中还要用到这个值。

div,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
.notice {
 width: 300px;/*单行显示,超出隐藏*/
 height: 35px;/*固定公告栏显示区域的高度*/
 padding: 0 30px;
 background-color: #b3effe;
 overflow: hidden;
}
.notice ul li {
 list-style: none;
 line-height: 35px;
 /*以下为了单行显示,超出隐藏*/
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

3、 JavaScript

封装函数 noticeUp.js

使用 jquery animate方法改变列表ul的marginTop值来实现滚动效果;

知识点:

1、animate 回调函数 animate 函数执行完之后,要执行的函数。

2、appendTo() 方法

在被选元素的结尾(仍然在内部)插入指定内容。

注意:指定内容是当前页面中的某些元素,那么这些元素将从原位置上消失。简而言之,这相当于一个移动操作,而不是复制操作。

/*
* 参数说明
* obj : 动画的节点,本例中是ul
* top : 动画的高度,本例中是-35px;注意向上滚动是负数
* time : 动画的速度,即完成动画所用时间,本例中是500毫秒,即marginTop从0到-35px耗时500毫秒
* function : 回调函数,每次动画完成,marginTop归零,并把此时第一条信息添加到列表最后;
* 
*/ 
function noticeUp(obj,top,time) {
 $(obj).animate({
 marginTop: top
 }, time, function () {
 $(this).css({marginTop:"0"}).find(":first").appendTo(this);
 })
}

4、 封装函数的调用

首先引入jQuery库和自己的封装插件

使用定时器setInterval来控制公告信息显示的时间间隔,本例中是2000毫秒

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="noticeUp.js"></script>
 <script>
 $(function () {
 // 调用 公告滚动函数
 setInterval("noticeUp('.notice ul','-35px',500)", 2000);
 });
</script>

更多滚动公告方式:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
js实现表格字段排序
Feb 19 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
vue axios 二次封装的示例代码
Dec 08 #Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 #Javascript
js断点调试心得分享(必看篇)
Dec 08 #Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 #Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 #Javascript
微信小程序实现下载进度条的方法
Dec 08 #Javascript
js断点调试经验分享
Dec 08 #Javascript
You might like
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php解析xml方法实例详解
2015/05/12 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
JavaScript实现手风琴效果
2021/02/18 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
python正则分析nginx的访问日志
2017/01/17 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
在校硕士自我鉴定
2014/01/23 职场文书
公司年会主持词
2014/03/22 职场文书
合理化建议书
2015/02/04 职场文书