基于javascript实现文字无缝滚动效果


Posted in Javascript onMarch 22, 2016

本文实例为大家分享了javascript实现文字无缝滚动的全部代码,供大家参考,具体内容如下

效果图:

基于javascript实现文字无缝滚动效果

实现代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style>
   *{margin:0;padding:0;}
    .div{margin:100px auto 0;width:350px;height:168px; background:#fff;border:5px solid #ccc; border-radius:5px; overflow:hidden;padding:5px; cursor: pointer;}
    .div ul li{list-style:none;height:24px; line-height: 24px; text-overflow:ellipsis; font-size: 12px; white-space:nowrap; overflow: hidden;}
  </style>
</head>
<body>
   <div class="div" id="div">
  <ul>
    <li>1、分看见地上放声大哭了范上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了德萨</li>
    <li>2、分看见地上放声大哭了范上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了德</li>
    <li>3、分看见地声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
    <li>4、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
    <li>5、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
    <li>6、分看见地上放声大哭了范声大哭了上放声大哭了</li>
    <li>7、分看见地上放声大哭了上放声大哭了上放声大哭了范上放声大哭了上放声大哭了德</li>
    <li>8、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
  </ul>
 </div>
 <script type="text/javascript">
 
 
   var area = document.getElementById('div');
   var iliHeight = 24;//单行滚动的高度
   var speed = 50;//滚动的速度
   var time;
   var delay= 1000;
   area.scrollTop=0;
   area.innerHTML+=area.innerHTML;//克隆一份一样的内容
   function startScroll()
   {
     time=setInterval("scrollUp()",speed);
     area.scrollTop++;
   }
 
   function scrollUp()
   {
     if(area.scrollTop % iliHeight==0)
     {
       clearInterval(time);
       setTimeout(startScroll,delay);
     }else{
       area.scrollTop++;
       if(area.scrollTop >= area.scrollHeight/2){
         area.scrollTop =0;
      }
    }
  }
  setTimeout(startScroll,delay)
 
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家javascript程序设计有所帮助。

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
AngularJS实现路由实例
Feb 12 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 #Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 #Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 #Javascript
jQuery toggle 代替方法
Mar 22 #Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 #Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 #Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 #Javascript
You might like
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
php中__toString()方法用法示例
2016/12/07 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
python数据结构之二叉树的遍历实例
2014/04/29 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
详解python中的数据类型和控制流
2019/08/08 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
PHP经典面试题
2016/09/03 面试题
广州品高软件.net笔面试题目
2012/04/18 面试题
车队司机个人自我鉴定
2014/04/17 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
运动会演讲稿100字
2014/08/25 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
小学副班长竞选稿
2015/11/21 职场文书
诉讼和解协议书
2016/03/23 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python