js实现文字无缝向上滚动


Posted in Javascript onFebruary 16, 2017

静态效果如下:(动态效果复制粘贴下面代码可见)

js实现文字无缝向上滚动

代码如下:

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <style type="text/css">
 *{
 padding: 0;
 margin:0;
 }
 ul,li{
 list-style: none
 }
 .scroll {
 height:90px;
 width:100%;
 max-width:640px;
 background-color:#000;
 overflow:hidden;
 color: #fff;
 }
 .scroll ul {
 width:100%;
 position:absolute;
 left:0;
 top:0;
 }
 .scroll span {
 font-size:20px;
 height:30px;
 /*color:#D83E21;
 */
 }
 .scroll li {
 height:30px;
 line-height:30px;
 }
 </style>
</head>
<body>
 <div id="scroll" class="scroll clearfix">
  <ul>
  <li>444444444444444444444444</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>33333333333333333333333333</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>11111111111111111111111111</li>
  <li>2222222222222</li>
  </ul>
 </div>
</body>
</html>
<script type="text/javascript"> 
 //滚动
 var scrollIndex=0;
 var Timer=null;
 function scroll_f(){
  clearInterval(Timer);
  var ul=$("#scroll ul");
  var li=ul.children("li");
  var h=li.height();
  var index=0;
  ul.css("height",h*li.length*2);
  ul.html(ul.html()+ul.html());    
     function run()
         {
         if(scrollIndex>=li.length){
          ul.css({top:0});
          scrollIndex=1;
          ul.animate({top:-scrollIndex*h},200);
         } 
         else{
          scrollIndex++; 

          ul.animate({top:-scrollIndex*h},200);
         }
         }
     Timer=setInterval(run,1500); 
 }
 $(function(){
  scroll_f();
 })
</script>

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

Javascript 相关文章推荐
Prototype ObjectRange对象学习
Jul 19 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
node学习记录之搭建web服务器教程
Feb 16 #Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 #Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 #Javascript
js模态对话框使用方法详解
Feb 16 #Javascript
javascript获取以及设置光标位置
Feb 16 #Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 #Javascript
浅谈$_FILES数组为空的原因
Feb 16 #Javascript
You might like
数据库的日期格式转换
2006/10/09 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
用于table内容排序
2006/07/21 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
python根据出生日期返回年龄的方法
2015/03/26 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python实现飞行棋游戏
2020/02/05 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
2014年师德承诺书
2014/05/23 职场文书
教师个人发展总结
2015/02/11 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers