<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>滚动公告</title>

         <script src="jquery.min.js"></script>

         <style>

             *{

                 padding: 0;

                 margin: 0;

             }

             body{

                 margin: 50px;

             }

             ul,li{

                 list-style: none;

             }

             li{

                 height: 30px;

                 line-height: 30px;

             }

         </style>

     </head>

     <body>

         <ul>

             <li>我是第1条公告............................</li>

             <li>我是第2条公告............................</li>

             <li>我是第3条公告............................</li>

             <li>我是第4条公告............................</li>

             <li>我是第5条公告............................</li>

             <li>我是第6条公告............................</li>

             <li>我是第7条公告............................</li>

             <li>我是第8条公告............................</li>

             <li>我是第9条公告............................</li>

         </ul>

         <script>

             $(function(){

                 setInterval(function(){

                     var newLi = $('ul>:first').clone(true);

                     $('ul').append(newLi);

                     $('ul>:first').remove();

                 },2000);

             })

         </script>

     </body>

 </html>

效果：

滚动公告--jq的更多相关文章

  1. Taro -- 文字左右滚动公告效果

    文字左右滚动公告效果 设置公告的左移距离,不断减小,当左移距离大于公告长度(即公告已移出屏幕),重新循环. <View className='scroll-wrap'> <View ...

  2. vue 滚动公告

    <!-- 滚动公告 --> <div class="textArr"> <p class="slice-enter-active" ...

  3. HTML-滚动字幕的源代码（可作滚动公告）

    1.字体颜色可变幻的滚动字幕源代码: <DIV style="FILTER: glow(color=#000000 ,strength=1); COLOR: #000000; HEIG ...

  4. [JS]手动实现一个横屏滚动公告js插件

    前言 工作中要用到.在github上找的大部分都是竖屏滚动没办法只能自己手动写. 本来只是想随便实现一下的,结果一时兴起把它弄成了一个简单的小插件,开了个github仓库(希望路过点个星) JS横屏滚 ...

  5. 【H5】滚动事件(jq)

    $(function(){ console.log($('html,body').scrollTop());  //记录滚动高度(滚动前) }) $('html,body').scroll(funct ...

  6. 微信小程序 - 滚动公告组件

    支持横轴.纵轴滚动. 点击下载:speaker

  7. 纯css滚动公告栏目

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. cocos 向左滚动公告

      properties:{ lblNotice:[cc.Node], speed:1, curtext:null }, start (){ this.getNotice(); }, getNotic ...

  9. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

随机推荐

  1. CCNA学习视频

    CCNA:链接:https://pan.baidu.com/s/1aiZC4pbYIu9qJSWcVfKwWw 提取码请私信楼主

  2. 通过微信公众号API复制公众号自定义菜单同时增加子菜单方法

    主要的原因是再不破坏公众号以前的菜单的基础上增加自定义菜单,主要步骤如下: 1.通过微信提供的微信公众平台接口调试工具获取公众号的所有自定义菜单 网址:https://mp.weixin.qq.com ...

  3. JavaScript图片上传前的图片预览功能

    JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...

  4. IDEA报错No Spring WebApplicationInitializer types detected on classpath

    IDEA报错No Spring WebApplicationInitializer types detected on classpath https://my.oschina.net/sprouti ...

  5. C++——Vector

    #include "opencv2/objdetect.hpp" #include "opencv2/videoio.hpp" #include "o ...

  6. C/C++扩展Python的时候数据类型转换的对应：

  7. Django之ORM操作

    Django之ORM操作 前言 Django框架功能齐全自带数据库操作功能,本文主要介绍Django的ORM框架 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计 ...

  8. IDEA开发环境中快捷键与系统 QQ等冲突的解决办法

    1.快捷键冲突1:IDEA中,Ctrl+Alt+向左/右/箭头快捷键 (回到光标的前一个位置,回到光标的后一个位置).该快捷键与系统中旋转屏幕的快捷键冲突了,需要解决.为了保留IDEA的中快捷键,我就 ...

  9. docker-3 Apache

    docker 安装 Apache 环境 docker pull httpd 文件创建连接(这样就可以不用发布了,两个文件夹会自动同步文件) ln -s /root/jenkins_home/works ...

  10. Angular中不同的组件间传值与通信的方法

    主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...