php公告滚动源码,10行js代码实现上下滚动公告效果方法

本文主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。希望能帮助到大家。

需求

在最近的项目中需要实现公告栏滚动显示效果如下：

解决方案

1、 HTML

先建一个p层作为公告显示区，里面包裹一个公告列表(ul);

第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告
第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告
第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告
第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告

2、 CSS

固定公告栏显示区域的高度(35px),每条公告信息(li)的高度也必须是这个高度(我这里偷懒就用了行高)，后面js中还要用到这个值。p,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毫秒

$(function () {

// 调用公告滚动函数

setInterval("noticeUp('.notice ul','-35px',500)", 2000);

});

大家觉得不错的话赶紧收藏起来吧。

php公告滚动源码,10行js代码实现上下滚动公告效果方法相关推荐

html5效果源码,10款web前端值得学习的 HTML5 效果附源码
1.jQuery右侧Tab选项卡的焦点图插件这是一款基于jQuery的焦点图插件,和之前介绍的jQuery焦点图插件类似,它以淡入淡出的动画方式来切换图片,该焦点图插件的特点是右侧有一排Tab选项卡 ...
Canvas编程练习：20几行js代码实现雷达扫描动画效果
灵感源于一不小心挖了一个陈年老贴etherdream发的<[分享]魔兽技能冷却效果(希望能有更好的思路)>的坟,看他的代码太长(约200行),于是自己动手写了一个,也就20多行代码,效果也 ...
HTML5期末大作业：网站——美丽家乡(南京介绍7个页面) 家乡文化介绍学生DW网页设计作业源码(HTML+CSS+JS) ~学生dreamweaver网页设计作业成品
HTML期末大作业~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...
【nodejs原理源码赏析（6）】深度剖析cluster模块源码与node.js多进程（下）
目录一. 引言二.server.listen方法三.cluster._getServer( )方法四.跨进程通讯工具方法Utils 五.act:queryServer消息六.轮询调度Roun ...
【nodejs原理源码赏析（6）】深度剖析cluster模块源码与node.js多进程
示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录华为云社区地址:[你要的前端打怪升级指南] 文章 ...
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适 ...
HTML期末大作业~ 明星林依晨（7页）带留言学生网页设计作业源码(HTML+CSS+JS)
HTML期末大作业~ 明星林依晨(7页)带留言学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
HTML网页设计结课大作业~仿凡客服装商城主页纯HTML模板源码(HTML+CSS+JS)
HTML网页设计结课作业~服装商城主页纯HTML模板源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多 ...
web课程设计网页规划与设计~时尚服装购物商城模板html源码(HTML+CSS+JS)
HTML网页设计结课作业~橙色时尚服装购物商城模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等 ...

php公告滚动源码,10行js代码实现上下滚动公告效果方法

php公告滚动源码,10行js代码实现上下滚动公告效果方法相关推荐

最新文章

热门文章