利用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 相关文章推荐
在JS方法中返回多个值的方法汇总
May 20 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python多进程fork()函数详解
2019/02/22 Python
解决Django中多条件查询的问题
2019/07/18 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
护士自荐信范文
2013/12/15 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
年终总结会议主持词
2014/03/17 职场文书
体育运动会广播稿
2014/10/05 职场文书
趵突泉导游词
2015/02/03 职场文书
学校运动会开幕词
2016/03/03 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书