利用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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
vuejs指令详解
2017/02/07 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python输出pdf文档的实例
2020/02/13 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
python中如何使用虚拟环境
2020/10/14 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
工程质量月活动方案
2014/02/19 职场文书
白血病募捐倡议书
2014/05/14 职场文书
节约粮食标语
2014/06/18 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
实习科室评语
2015/01/04 职场文书
2015年大学生实习评语
2015/03/25 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
Vue如何清空对象
2022/03/03 Vue.js