利用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跟随滚动条滚动浮动代码
Dec 31 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
咖啡蛋糕店创业计划书
2014/01/28 职场文书
阳光体育活动总结
2014/04/30 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
店铺转让协议书
2014/12/02 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
法人代表证明书范本
2015/06/18 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
mysql sock文件存储了什么信息
2022/07/15 MySQL