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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
vue form check 表单验证的实现代码
Dec 09 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Android分包MultiDex策略详解
2017/10/30 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Python实现图片识别加翻译功能
2019/12/26 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
2014组织生活会方案
2014/05/19 职场文书
教师岗位职责
2015/02/03 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
中学总务处工作总结
2015/08/12 职场文书
PHP命令行与定时任务
2021/04/01 PHP
详解Python自动化之文件自动化处理
2021/06/21 Python
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers