利用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之大字符串的连接的StringBuffer 类
May 08 Javascript
jQuery参数列表集合
Apr 06 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 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返回字符串中所有单词的方法
2015/03/09 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP使用函数用法详解
2018/09/30 PHP
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
JavaScript回调函数callback用法解析
2020/01/14 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python迭代用法实例教程
2014/09/08 Python
python使用Tesseract库识别验证
2018/03/21 Python
python实现flappy bird游戏
2018/12/24 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
用python制作个视频下载器
2021/02/01 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
优秀的教师个人的中文求职信
2013/09/21 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python