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 相关文章推荐
javascript函数中的arguments参数
Aug 01 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
js控制table合并具体实现
2014/02/20 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python中的字符串内部换行方法
2018/07/19 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
mysql如何能有效防止删库跑路
2021/10/05 MySQL
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
Oracle锁表解决方法的详细记录
2022/06/05 Oracle