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精华代码集
Jan 24 Javascript
xml和web特殊字符
Apr 28 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
php懒人函数 自动添加数据
2011/06/28 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python中遍历列表的方法总结
2019/06/27 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
servlet面试题
2012/08/20 面试题
企业厂务公开实施方案
2014/03/26 职场文书
优质服务活动实施方案
2014/05/02 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
毕业感言怎么写
2015/07/31 职场文书
《静夜思》教学反思
2016/02/17 职场文书
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android