基于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 相关文章推荐
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
angularJS 中input示例分享
Feb 09 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
广告显示判断
2006/08/31 Javascript
javascript编程起步(第六课)
2007/01/10 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
Javascript中神奇的this
2016/01/20 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
python列表操作实例
2015/01/14 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python2.7实现邮件发送功能
2018/12/12 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
初一体育教学反思
2014/01/29 职场文书
一名老师的自我评价
2014/02/07 职场文书
致接力运动员广播稿
2014/02/17 职场文书
生日寄语大全
2014/04/08 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
学校安全防火方案
2014/06/07 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python