利用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 哈希表(hashtable)的简单实现
Jan 20 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
alert和confirm功能介绍
May 21 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
使用vant的地域控件追加全部选项
Nov 03 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
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
javascript标签在页面中的位置探讨
2013/04/11 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
英国绿色商店:Natural Collection
2019/05/03 全球购物
人事部经理岗位职责
2014/03/07 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
委托证明范本
2014/11/25 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
同事去世追悼词
2015/06/23 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android