JavaScript实现的滚动公告特效【基于jQuery】


Posted in jQuery onJuly 10, 2019

本文实例讲述了JavaScript实现的滚动公告。分享给大家供大家参考,具体如下:

今天给大家分享一篇滚动公告的特效。

效果图:

JavaScript实现的滚动公告特效【基于jQuery】

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>滚动公告</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    body{
      margin:20px;
    }
    ul{
      width:200px;
      list-style-type: none;
      border:1px solid red;
    }
    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>
    <li>我是第10条公告</li>
  </ul>
</body>
<script>
  //利用定时器每秒执行一次函数
  setInterval(function(){
    $('ul>:first').clone(true).appendTo('ul');//复制一个新的节点并添加到ul中
    $('ul>:first').remove();//将原来的节点删除
  },1000);
</script>
</html>

页面中有一个ul,首先写一个定时器,每秒执行一次函数,在函数中将ul中的第一个条目复制一份并添加到ul的底部,最后将原来的条目删除。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
jQuery属性选择器用法实例分析
Jun 28 #jQuery
jQuery位置选择器用法实例分析
Jun 28 #jQuery
jQuery层叠选择器用法实例分析
Jun 28 #jQuery
You might like
PHP 数据库树的遍历方法
2009/02/06 PHP
mysql总结之explain
2012/02/27 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript call和apply方法
2008/11/24 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python读取与处理netcdf数据方式
2020/02/14 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
用python批量下载apk
2020/12/29 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
技校个人求职信范文
2014/01/25 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript