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

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. 使用jquery怎么选择有两个class的元素？

    实例: 我们想要选择class为:box_list clearfix 的div <div class="box_list clearfix" style="z-in ...

  2. day 42 mysql 数据库(2)

    前情提要: 本节继续学习数据库   一:ddl 创建表 >字段名 >数据类型 >约束规则 >显示建表语句 修改表: 二:数据类型 >数值类型 >小数类型 >字 ...

  3. DIV+CSS 按比例等分

    div { display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */ width: calc(100% / 3.09); /* 此处运用了一个css3的表达式,将d ...

  4. java调用存储过程、存储函数

    需要用到的接口 接口 CallableStatement JDK文档对改接口的说明: public interface CallableStatement extends PreparedStatem ...

  5. Android之Zxing二维码扫描图片拉伸

    还是这个接手项目,二维码扫描集成的是zxing,扫描界面的图像有明显的拉伸变形. 这种问题,根据以往的经验,一般是x,y轴错位引起的,处理好x,y轴的问题,一般可以解决问题. 由于这个问题,之前有很多 ...

  6. 快速搭建gulp项目实战

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大 ...

  7. mongodb 错误 SCRAM-SHA-1 authentication failed for --转

    log 日志错误信息 2018-10-24T16:14:42.244+0800 I NETWORK [initandlisten] connection accepted from 192.168.1 ...

  8. PHP面向对象常见符号总结($this-> 、self ::)

    转载:http://wyllife.blog.163.com/blog/static/4116390120116223528180/ 在php中常见的对象符号 1.$this this是指向当前对象的 ...

  9. 01 JDBC的问题

    jdbc编程步骤: 1. 加载.注册数据库驱动   DriverManager 2. 创建并获取数据库链接   Connection 3. 创建jdbc statement/preparedState ...

  10. java面试⑥框架部分

    2.5.1 什么是框架: 2.5.2 MVC模式 2.5.3 MVC框架 2.5.4 简单讲一下struts2的执行流程 2.5.5 Struts2中的拦截器,你都用它干什么? 2.5.6 简单讲一下 ...