Rumah > hujung hadapan web > tutorial js > Laksanakan kesan tatal teks lancar berdasarkan kemahiran javascript_javascript

Laksanakan kesan tatal teks lancar berdasarkan kemahiran javascript_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:09:49
asal
1477 orang telah melayarinya

Contoh dalam artikel ini berkongsi dengan anda semua kod JavaScript untuk mencapai tatal teks yang lancar untuk rujukan anda. Kandungan khusus adalah seperti berikut

Rendering:

Kod pelaksanaan:

<!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>
Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam pengaturcaraan javascript.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan