jQuery实现的上下滚动公告栏详细讲解
之前做项目的时候，一直都想着做一个上下滚动的公告栏，作为展示网站的最新公告信息，因为刚开始自己的思路并不是太清晰，在网上找了很多的源码，但是却发现都不能让自己满意，有的还会出现一些小问题，比如，有时候公告上下滚动的时候，两条公告会重叠在一起。最后我还是决定自己写一个上下滚动的公告栏。
jQuery实现上下滚动公告栏原理
虽然在网上找的有些代码有时候会出现一些问题，但是思路咱还是可以借鉴一下的。
我们先来看一下，我做的上下滚动公告栏效果图，如果你感觉是你要的那款，那么你再接着往下看是怎么实现的。
图中箭头所指内容就是公告内容，它会不停的上下滚动，当然滚动时间可以自己设置的。
下面我们来看下是怎么实现的。
其实实现滚动效果主要用到jQuery中的animate() 方法，而animate() 方法就是创建动画效果，简单的说就是，当我们用js将“一棵树”的height属性从100px变为200px的时候，我们会看到“这个树”瞬间从100高度长到了200高度，但是我们用animate() 方法，我们会看到“这颗树”从100高度慢慢的长到200高度，我们可以看到这个过程，这就是animate() 方法的作用，当然“树”的生长速度是可以控制的。
了解了jQuery的animate()方法，我们还需要了解一下setInterval( )这个方法，可能很多同学知道这个方法，因为它就是一个简单的定时函数，我们看一下它的用法
setInterval(function(){ alert("Hello"); }, );
这句代码就是每过3秒执行一次该方法，弹出一个“hello”。
好了，理解了前面的两个方法，那么下面的代码你一定可以看懂得。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动公告栏</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
body{padding: 0;margin:0;background-color:#f9f9f9}
.ul1{list-style: none;margin: 0}
li{padding: 5px;}
</style>
</head>
<body>
<div style="height: 60px;background-color: #191e29;">
<p style="margin: 0;color: #fff;line-height: 60px;text-align: center;">这是用jQuery实现的上下滚动公告栏</p>
</div>
<div style="background-image: url(timg.jpg); margin:15px 90px 0 90px;padding-left: 310px; height: 600px;">
<div style="position: relative;height: 26px;overflow: hidden;">
<ul class="ul1">
<li>K先生：我求求你嫁给我</li>
<li>K先生：等你老了，我依然背着你</li>
<li>K先生：我给你当拐杖</li>
<li>K先生：等你没牙了，我就嚼碎了再喂给你吃</li>
</ul>
<img style="position: absolute;top: 9px;left: 20px" width="15px" height="15px" src="laba.png">
</div>
</div>
<script type="text/javascript">
$(function(){
var num=$(".ul1").find("li").length;
console.log("直接运行"+num);
if (num>1) {
setInterval(function(){
$('.ul1').animate({
marginTop:"-26px"
},500,function(){
$(this).css({marginTop : "0"}).find("li:first").appendTo(this);
});
}, 3000);
} });
</script>
</body>
</html>
如果你有更好得建议或者问题，欢迎下方留言哦。
本篇文章来自K先生的博客（有源码哦）。
jQuery实现的上下滚动公告栏详细讲解的更多相关文章
- JavaScript实现无缝滚动 原理详细讲解
先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...
- jquery插件分类与编写详细讲解
jquery插件分类与编写详细讲解 1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率. jQeury主要有2种类型 1)实例对象方法插件 开发能让所有的j ...
- （三）Jquery Mobile按钮详细讲解
Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示 1.HTML5中的button 效果: 2. JM中的普通button ...
- jQuery.uploadify文件上传组件实例讲解
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- Iframe 用法的详细讲解
1转自:https://blog.csdn.net/judyge/article/details/51786064 zIframe 用法的详细讲解 把iframe解释成“浏览器中的浏览器“很是恰当 & ...
- 30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...
- head标签详细讲解
head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...
- 详细讲解nodejs中使用socket的私聊的方式
详细讲解nodejs中使用socket的私聊的方式 在上一次我使用nodejs+express+socketio+mysql搭建聊天室,这基本上就是从socket.io的官网上的一份教程式复制学习,然 ...
- iOS KVC详细讲解
iOS KVC详细讲解 什么是KVC? KVC即NSKeyValueCoding,就是键-值编码的意思.一个非正式的 Protocol,是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取 ...
随机推荐
- 12、xamarin form中实现H5 网页唤醒微信支付的方法
在微信的支付中有种支付叫微信H5支付.方便用户在网页中轻松唤起微信进行支付. 当然微信不推荐大家使用这样的方式唤起微信支付.建议app还是使用正常的微信支付sdk即可 服务端与其他的建议参考微信支付官 ...
- 11、使用xamarin实现全屏播放rtmp之类的直播视频
直播类的app大部分都是以rtmp hls播放为主.目前主流的app解决方案大部分是引入ijkplayer 这个是基于ffmpeg中的ffplayer实现的. 众所周知ffmpeg的解码能力是一流的. ...
- (转)DB2 HADR 监控详解
原文:https://www.ibm.com/developerworks/cn/data/library/techarticles/dm-1010baosf/ HADR 简介 HADR( 高可用性灾 ...
- Spring Security构建Rest服务-1205-Spring Security OAuth开发APP认证框架之Token处理
token处理之二使用JWT替换默认的token JWT(Json Web Token) 特点: 1,自包含:jwt token包含有意义的信息 spring security oauth默认生成的t ...
- java数据结构之三叉链表示的二叉树
三叉链表示的二叉树定义所畏的三叉链表示是指二叉树由指向左孩子结点.右孩子结点.父亲结点[三叉]的引用(指针)数据和数据组成. package datastructure.tree.btree; ...
- Hadoop HDFS概念学习系列之HDFS升级和回滚机制（十二）
不多说,直接上干货! HDFS升级和回滚机制 作为一个大型的分布式系统,Hadoop内部实现了一套升级机制,当在一个集群上升级Hadoop时,像其他的软件升级一样,可能会有新的bug或一些会影响现有应 ...
- android学习-IPC机制之ACtivity绑定Service通信
bindService获得Service的binder对象对服务进行操作 Binder通信过程类似于TCP/IP服务连接过程binder四大架构Server(服务器),Client(客户端),Serv ...
- 如何在python3环境下的Django中使用MySQL数据库
我们在使用Django过程中,连接MySQL数据库时,对Python不同的版本对应的库也不一样,用惯了Python2的人在使用Python3时经常会遇到下面的错误: Error loading MyS ...
- centos7设置SSH安全策略–指定IP登陆
之前自己搭建了个博客网站(理想三旬),写了些文章,但是由于一些原因慢慢将文章放在博客园了.所以这里将一些文章复制过来.便于以后自己查询. 为了服务器的安全性,我们在日常使用需要授予权限和指定ip登陆来 ...
- B+树 -- Java实现
一.B+树定义 B+树定义:关键字个数比孩子结点个数小1的树. 除此之外B+树还有以下的要求: B+树包含2种类型的结点:内部结点(也称索引结点)和叶子结点.根结点本身即可以是内部结点,也可以是叶子结 ...