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函数的重载
Sep 22 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
理解Javascript的call、apply
Dec 16 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
axios异步提交表单数据的几种方法
Aug 11 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
smtp邮件发送一例
2006/10/09 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
php页面防重复提交方法总结
2013/11/25 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
利用Python检测URL状态
2019/07/31 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
Python with语句用法原理详解
2020/07/03 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
机械电子工程毕业生自荐信
2013/11/23 职场文书
工作决心书
2014/03/11 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
投诉书格式范本
2015/07/02 职场文书