js实现文字向上轮播功能


Posted in Javascript onJanuary 13, 2017

话不多说,请看实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin:0;
 padding:0;
 }
 .lunbo{
 position: relative;
 width: 600px;
 height: 50px;
 border:1px solid red;
 overflow: hidden;
 }
 ul{
 position:absolute;
 left: 0;
 top:0;
 width: 600px;
 height: auto;
 }
 ul li{
 width: 600px;
 height: 50px;
 line-height: 50px;
 font-size:20px;
 color:#333;
 text-align: center
 }
 </style>
</head>
<body>
 <div class="lunbo">
 <ul>
 <li>人生在世须尽欢 莫使金樽空对月</li>
 <li>我寄愁心与明月,随风直到夜郎西</li>
 <li>不是花中偏爱菊,此花开尽更无花</li>
 <li>辛苦遭逢起一经,干戈寥落四周星</li>
 <li>山河破碎风飘絮,身世浮沉雨打萍。</li>
 <li>惶恐滩头说惶恐,零丁洋里叹零丁。</li>
 <li>人生自古谁无死?留取丹心照汗青。</li>
 </ul>
 </div>
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
 function lunbo(id,height){
  var ul=$(id);
  var liFirst=ul.find('li:first');
  $(id).animate({top:height}).animate({"top":0},0,function(){
  var clone=liFirst.clone();
  $(id).append(clone);
  liFirst.remove();
  })
 }
 setInterval("lunbo('ul','-50px')",3000)
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 #Javascript
js实现交通灯效果
Jan 13 #Javascript
微信小程序 简单教程实例详解
Jan 13 #Javascript
javascript构造函数以及原型对象的理解
Jan 13 #Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 #Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 #Javascript
微信小程序(三):网络请求
Jan 13 #Javascript
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python中的两个内置模块介绍
2015/04/05 Python
Unicode和Python的中文处理
2017/03/19 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
python生成大写32位uuid代码
2020/03/03 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
师德师风承诺书
2014/05/23 职场文书
初中班干部工作总结
2015/08/10 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Redis Stream类型的使用详解
2021/11/11 Redis
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技
Django中celery的使用项目实例
2022/07/07 Python