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

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

需求

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

66187f0f8668b2732bf1998fcc05fb4a.gif

解决方案

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);

});

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

相关推荐:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/326420.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL left()函数

转载自 MySQL left()函数 MySQL LEFT函数介绍 LEFT()函数是一个字符串函数,它返回具有指定长度的字符串的左边部分。 下面是LEFT()函数的语法 - LEFT(str,length);LEFT()函数接受两个参数: str是要提取子字符串的字符串。length是一个正整数&…

encipher.min.php,陌屿授权系统(5.7)最新版 网站授权 - 下载 - 搜珍网

压缩包 : e0a1fd64fcf962a8709ed861e2bd0205.zip 列表admin/pass.php360safe/360safe/360webscan.php360safe/webscan_cache.phpadmin/admin/add.phpadmin/addsite.phpadmin/adduser.phpadmin/daili.phpadmin/downfile.phpadmin/download.phpadmin/edit.phpadmin/getpwd.phpadm…

2020蓝桥杯省赛---java---B---10(整数小拼接)

题目描述 代码实现 package com.atguigu.lanqiao;import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int k sc.nextInt();int[] array new int[n];for (int i 0; i < n; i…

word常识整理

wps启动方式&#xff1a; 1.在开始菜单中找到wps office进行启动 2.鼠标右击新建一个空白的word文档 wps快捷键以及技巧&#xff1a; 1.全选&#xff1a;ctrlA 2.复制&#xff1a;ctrlc 3.粘贴&#xff1a;ctrlv 4.保存&#xff1a;ctrls 5.查找&#xff1a;ctrlf wor…

[ASP.NET Core] Middleware

前言 本篇文章介绍ASP.NET Core里&#xff0c;用来处理HTTP封包的Middleware&#xff0c;为自己留个纪录也希望能帮助到有需要的开发人员。 ASP.NET Core官网 结构 在ASP.NET Core里&#xff0c;每个从「浏览器传入」的HTTP Request封包&#xff0c;会被系统封装为「HttpReques…

MySQL Replace()函数

转载自 MySQL Replace()函数 MySQL REPLACE字符串函数简介 MySQL为您提供了一个有用的字符串函数REPLACE()&#xff0c;它允许您用新的字符串替换表的列中的字符串。 REPLACE()函数的语法如下&#xff1a; REPLACE(str,old_string,new_string);REPLACE()函数有三个参数&am…

matlab实践作业,实验作业2 MATLAB作图.doc

实验作业2 MATLAB作图1、用plot,fplot 绘制函数ycos(tan(x))的图形。解&#xff1a;代码如下:xlinspace(-0.5,0.5,30);ycos(tan(pi*x));plot(x,y)结果&#xff1a;fplot([cos(tan(pi*x))],[-0.5,0.5])结果&#xff1a;注意事项&#xff1a; fplot([cos(tan(pi*x))],[-0.5,0.5])…

2015蓝桥杯省赛---java---C---6(奇妙的数字)

题目描述 思路分析 看到这题目想到的就是 for 循环遍历数字&#xff0c;然后计算它的平方和立方再去判断它们刚好使用0-9这10个数各一次。 代码实现 package com.kuang.study.lanqiao;/*** 创建人 wdl* 创建时间 2021/4/8* 描述*/ public class Main {public static void ma…

Excel常识整理

1.excel中的界面&#xff1a;功能选项卡、标题栏、单元格名称、 功能面板、编辑栏、工作表导航按钮、工作表标签。 2.输入内容&#xff1a;&#xff08;1&#xff09;直接在单元格中进行输入 &#xff08;2&#xff09;在函数的后面输入 3.撤销&#xff1a;ctrlz 4.返回撤…

MySQL substring()函数

转载自 MySQL substring()函数 在本教程中&#xff0c;我们将向您介绍MySQL SUBSTRING函数从字符串中提取子字符串。 SUBSTRING函数从特定位置开始的字符串返回一个给定长度的子字符串。 MySQL提供了各种形式的子串功能。 我们将在以下部分中检查SUBSTRING函数的每种形式。…

跨平台的.NET邮件协议MailKit组件解析

发起的.NET Core开源组织号召&#xff0c;进展的速度是我自己也没有想到的&#xff0c;很多园友都积极参与&#xff08;虽然有些人诚心砸场子&#xff0c;要是以我以前的宝脾气&#xff0c;这会应该被我打住院了吧&#xff0c;不过幸好是少数&#xff0c;做一件事总有人说好&am…

2015蓝桥杯省赛---java---C---9(打印大X)

题目描述 思路分析 找规律 代码实现 package com.kuang.study.lanqiao;import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int x sc.nextInt();int y sc.nextInt();char [][] arr new char[y][y…

php快速学习方法,php快速入门学习方法

一、心态在学习之前要注意调整心态&#xff0c;下面的日子是决定成败的关键&#xff0c;每天都在思考编程问题&#xff0c;不仅要懂还要会要精&#xff0c;要找成就感。成就感是学习的动力&#xff0c;心态是学习的关键&#xff0c;大家一定要坚持不能因为一点不会就放弃学习&a…

PPT基础整理

1.ppt页面组成部分&#xff1a;标题栏、功能选项卡、大纲区、功能面板、工作区 备注区、状态栏 2.插入wps自带模板&#xff1a;设计–》点击想要插入的模板 3.ppt视图&#xff1a;普通视图、大纲视图、幻灯片视图、备注页视图、母版视图 4.幻灯片制作的三板斧&#xff1a; …

MySQL trim()函数

转载自 MySQL trim()函数 MySQL TRIM函数介绍 用户输入的数据通常不是我们所预期的。有时候&#xff0c;它的格式不正确&#xff0c;例如错误的情况&#xff0c;甚至有些甚至包含前导和尾随空格以及其他不需要的字符。 为了保持数据格式正确&#xff0c;在数据库中插入或更…

老司机实战Windows Server Docker:1 初体验之各种填坑

前言 Windows Server 2016正式版发布已经有近半年时间了&#xff0c;除了看到携程的同学分享了一些Windows Server Docker的实践经验&#xff0c;网上比较深入的资料&#xff0c;不管是中文或英文的&#xff0c;都还不太多。工作中对Windows Server 2016下的Docker&#xff0c…

DOS基础整理

一、操作系统&#xff1a; 1.管理和控制计算机操作系统中的软件和硬件资源 2.合理的组织计算机工作流程 3.以方便用户使用的程序集合 二、操作系统的分类&#xff1a; 1.字符界面————DOS 2.图形界面————windows 三、启动DOS窗口&#xff1a; winR&#xff0c;打…

MySQL find_in_set()函数

转载自 MySQL find_in_set()函数 MySQL FIND_IN_SET函数简介 MySQL提供了一个名为FIND_IN_SET()的内置字符串函数&#xff0c;允许您在逗号分隔的字符串列表中查找指定字符串的位置。 下面说明了FIND_IN_SET()函数的语法。 FIND_IN_SET(needle,haystack);FIND_IN_SET()函数…

.NET Core项目从xproj+project.json向csproj迁移简介

3月7日&#xff0c;微软发布了Visual Studio 2017 RTM&#xff0c;与之一起发布的还有.NET Core Runtime 1.1.0以及.NET Core SDK 1.0.0&#xff0c;尽管这些并不是最新版&#xff0c;但也已经从preview版本升级到了正式版。所以&#xff0c;在安装Visual Studio 2017时如果启用…

马踏棋盘算法(骑士周游)+贪心优化

思路分析 代码实现 package com.atguigu.horse;import java.awt.*; import java.util.ArrayList; import java.util.Comparator;public class HorseChessboard {private static int x;//棋盘的列数private static int y;//棋盘的行数//创建一个数组&#xff0c;标记棋盘的各个…