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插件imgAreaSelect基础讲解
May 26 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery中event.target和this的区别详解
Aug 13 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 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Pandas中resample方法详解
2019/07/02 Python
django如何实现视图重定向
2019/07/24 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
Python的collections模块真的很好用
2021/03/01 Python
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
村长贪污检举信
2014/04/04 职场文书
营销总监岗位职责
2014/09/16 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python