利用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与DropDownList 区别分析
Jan 01 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 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 JSON 数据解析代码
2010/05/26 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
深入浅析Python字符编码
2015/11/12 Python
python实现装饰器、描述符
2018/02/28 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
详解python中递归函数
2019/04/16 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
神路信息Java面试题目
2013/03/31 面试题
2014年药房工作总结
2014/11/22 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
五年级小学生评语
2014/12/26 职场文书
青年志愿者活动感想
2015/08/07 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP
Go语言测试库testify使用学习
2022/07/23 Golang