前提  需要引入jquery  如果你用的单位不是px  修改的同时红色部分需保持一致

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>上下滚动公告栏</title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <style type="text/css">

      *{

        margin: 0px;

        padding: 0px;

      }

      ul {

        list-style: none;

        margin: ;

      }

      li {

        padding: 5px;

      }

      .notice {

        position: relative;

        height: 26px;

        overflow: hidden;

      }

    </style>

  </head>

  <body>

    <div class="notice">

      <ul class="ul-list">

        <li>就算没有人喜欢你 也并不表你不好</li>

        <li>你要等</li>

        <li>在未来的某一天</li>

        <li>有一个人会对你说喜欢你</li>

        <li>在此前你要先学会好好爱自己</li>

        <li>陆筱璟</li>

      </ul>

    </div>

  </body>

  <script type="text/javascript">

    $(function() {

      var num = $(".ul-list").find("li").length;

      if (num > ) {

        setInterval(function() {

          $(".ul-list").animate(

            {

              marginTop: "-26px"

            },

            ,

            function() {

              $(this)

                .css({ marginTop: "" })

                .find("li:first")

                .appendTo(this);

            }

          );

        }, );

      }

    });

  </script>

</html>

公告上下滚动基于Jquery的更多相关文章

  1. 基于jQuery的上下左右无缝滚动应用(单行或多行)

    $(function(){     var _wrap=$('ul.line');//定义滚动区域     var _interval=2000;//定义滚动间隙时间     var _moving; ...

  2. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  3. 基于jQuery实现滚动新闻代码下载

    分享一款基于jQuery实现滚动新闻代码下载.这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

  5. 基于jQuery左侧小图滚动右侧大图显示代码

    今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...

  6. 基于jquery鼠标或者移动端滚动加载数据

    基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...

  7. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  8. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  9. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

随机推荐

  1. 替换django的user模型出现的异常django.db.migrations.exceptions.InconsistentMigrationHistory: Migration admin.0001_initial is applied before its dependency users.0001_initial on database 'default'

    django.db.migrations.exceptions.InconsistentMigrationHistory: Migration admin.0001_initial is applie ...

  2. 对于文章的字母、单词、短语，（无用词表）的检索Java代码实现

    日期:2019.5.9 博客期:073 星期四 今天软件工程课上,又做了测试,老师说我们的速度太慢了,实际上我也觉得自己很慢.老师说了这是我们的上一届的大二上半学期学习中的速度,所以呢?意思就是说我们 ...

  3. C# 篇基础知识10——多线程

    1.线程的概念 单核CPU的计算机中,一个时刻只能执行一条指令,操作系统以“时间片轮转”的方式实现多个程序“同时”运行.操作系统以进程(Process)的方式运行应用程序,进程不但包括应用程序的指令流 ...

  4. Java对比两个数据库中的表和字段，写个冷门的东西

    Java对比两个数据库中的表和字段,写个冷门的东西 转载的 来源网络 目前所在的项目组距离下个版本上线已经很近了,就面临了一个问题:开发人员在开发库上根据需要增加数据表.数据字段.或者变更了字段类型或 ...

  5. 【Unity】鼠标划定范围然后截图~

    有时候要重复用某一个场景的某一个角度,都过去好几步了结果总不能再把已经打乱的场景物体再移动回去吧.so~智慧的我完成了伟大的偷懒.截图保存,什么时候要看,直接上图片以假乱真棒棒哒~ 当然这个功能还能用 ...

  6. GCPC 2018

    C.Coolest Ski Route 题意:n个点,m条边组成的有向图,求任意两点之间的最长路径 dfs记忆化搜索 #include<iostream> #include<stri ...

  7. SPFA和堆优化的Dijk

    朴素dijkstra时间复杂度$O(n^{2})$,通过使用堆来优化松弛过程可以使时间复杂度降到O((m+n)logn):dijkstra不能用于有负权边的情况,此时应使用SPFA,两者写法相似. 朴 ...

  8. Linux系统-----包管理器的演变

    每个电脑设备都使用某种形式的软件来执行其预定任务.在软件开发的早期,对产品进行了严格的bug和其他缺陷测试.在过去的十多年里,软件通过互联网发布,目的是通过应用新版本的软件来修复任何错误.在某些情况下 ...

  9. POJ 3259：Wormholes bellman_ford判定负环

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 37906   Accepted: 13954 Descr ...

  10. SpringMVC一点简单地源码解析

    . 1.1 init(初始化) 在第一次发出请求时,会调用HttpServletBean 的init()方法 org.springframework.web.servlet.HttpServletBe ...