之前做项目的时候，一直都想着做一个上下滚动的公告栏，作为展示网站的最新公告信息，因为刚开始自己的思路并不是太清晰，在网上找了很多的源码，但是却发现都不能让自己满意，有的还会出现一些小问题，比如，有时候公告上下滚动的时候，两条公告会重叠在一起。最后我还是决定自己写一个上下滚动的公告栏。

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实现的上下滚动公告栏详细讲解的更多相关文章

  1. JavaScript实现无缝滚动 原理详细讲解

    先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...

  2. jquery插件分类与编写详细讲解

    jquery插件分类与编写详细讲解 1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率.   jQeury主要有2种类型   1)实例对象方法插件 开发能让所有的j ...

  3. （三）Jquery Mobile按钮详细讲解

    Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示           1.HTML5中的button      效果:      2. JM中的普通button        ...

  4. jQuery.uploadify文件上传组件实例讲解

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  5. Iframe 用法的详细讲解

    1转自:https://blog.csdn.net/judyge/article/details/51786064 zIframe 用法的详细讲解 把iframe解释成“浏览器中的浏览器“很是恰当 & ...

  6. 30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）

    前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...

  7. head标签详细讲解

    head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...

  8. 详细讲解nodejs中使用socket的私聊的方式

    详细讲解nodejs中使用socket的私聊的方式 在上一次我使用nodejs+express+socketio+mysql搭建聊天室,这基本上就是从socket.io的官网上的一份教程式复制学习,然 ...

  9. iOS KVC详细讲解

    iOS KVC详细讲解 什么是KVC? KVC即NSKeyValueCoding,就是键-值编码的意思.一个非正式的 Protocol,是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取 ...

随机推荐

  1. iOS 设置textfield的最大文本长度

    //在现实开发中  需要控制文本输入长度 并实时做短信验证,代码如下 [self.textField addTarget:self action:@selector(codeChange:) forC ...

  2. 使用Hive UDF和GeoIP库为Hive加入IP识别功能

    Hive是基于Hadoop的数据管理系统,作为分析人员的即时分析工具和ETL等工作的执行引擎,对于如今的大数据管理与分析.处理有着非常大的 意义.GeoIP是一套IP映射数据库,它定时更新,并且提供了 ...

  3. 云计算平台管理的三大利器Nagios、Ganglia和Splunk

    综合利用Nagios.Ganglia和Splunk搭建起的云计算平台监控体系,具备错误报警.性能调优.问题追踪和自动生成运维报表的功能.有了这套系统,就可轻松管理Hadoop/HBase云计算平台. ...

  4. Xpath string()提取多个子节点中的文本

    <div> <ul class="show"> <li>275万购昌平邻铁三居 总价20万买一居</li> <li>00 ...

  5. 基于Web实现网络拓扑图

    想想好像好久没用写博客了! 由于最近想跳槽了(ps:尽管公司挽留,提出一些异与往常的挽留“制度”,But确实已经死心了) ,发现前一段时间一些做Hadoop,和Spark同事时常来请教网络拓扑图的有关 ...

  6. spring boot的拦截器简单使用

    1.spring boot拦截器默认有: HandlerInterceptorAdapter AbstractHandlerMapping UserRoleAuthorizationIntercept ...

  7. MongoDB运行状态、性能监控，分析

    转载自这位仁兄:地址 mongostat详解 mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态,并输出.如果你发现数据库突然变慢或者 ...

  8. 请编写一个C函数，将一个字符串逆序

    目前有两种思路,一个是申请一片辅助空间,然后将原字符串逆向拷贝到辅助空间,然后输出:另一种是原地逆序,不需要额外的辅助空间,方法就是字符串首尾交换. #include <stdio.h> ...

  9. 《Tomcat日志系统详解》

    综合:Tomcat下相关的日志文件 Cataline引擎的日志文件,文件名catalina.日期.log Tomcat下内部代码丢出的日志,文件名localhost.日期.log(jsp页面内部错误的 ...

  10. for-in循环

    //for in循环遍历var objs={"username":"hh","age":"20","sex&q ...