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 相关文章推荐
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
浅谈React之状态(State)
Sep 19 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 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
详解thinkphp中的volist标签
2018/01/15 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
DOM 高级编程
2015/05/06 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
django云端留言板实例详解
2019/07/22 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
利用python进行文件操作
2020/12/04 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
文明教师事迹材料
2014/01/16 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
先进员工获奖感言
2014/08/14 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
房屋租赁协议书
2014/10/18 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
安全生产会议制度
2015/08/06 职场文书
导游词之五台山
2019/10/11 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers