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 相关文章推荐
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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
学习使用PHP数组
2006/10/09 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
子页向父页传值示例
2013/11/27 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
python对象及面向对象技术详解
2016/07/19 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python global全局变量函数详解
2018/09/18 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
python实现计算器功能
2019/10/31 Python
Python yield的用法实例分析
2020/03/06 Python
python如何调用百度识图api
2020/09/29 Python
Joules美国官网:出色的英国风格
2017/10/30 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
某公司部分笔试题
2013/11/05 面试题
运动会通讯稿500字
2014/02/20 职场文书
人事部经理岗位职责
2014/03/07 职场文书
地理科学专业自荐信
2014/09/01 职场文书
毕业论文致谢范文
2015/05/14 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript