AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
javascript文字无缝滚动,javascript无缝滚动,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无缝滚动,javascript文字滚动  
上一篇:javascript的几种继承方法介绍  下一篇:ajax在兼容模式下失效的快速解决方法