js 文本滚动效果的实例代码

181 阅读 0 评论 120 点赞

我是靠谱客的博主欢呼水蜜桃，最近开发中收集的这篇文章主要介绍js 文本滚动效果的实例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 <style type="text/css">
  *{margin:0;padding:0;}
  ul{list-style:none outside none}
  .slchanpin001{width:200px;border:1px solid orange;margin:55px auto}
  .slchanpin001-t{height:25px;background:orange}
  .slchanpin001-c{width:200px;height:60px;overflow:hidden;position:relative}
  .slchanpin001-c li{float:left;width:200px;height:60px;background:red;}
  .slchanpingCon01{height:60px;position:absolute;top:0;left:0;}
 </style>
 </head>
 <body>
  <div class="slchanpin001">
   <div class="slchanpin001-t"></div>
   <div class="slchanpin001-c">
    <div class="slchanpingCon01" id="slchanpingCon01">
     <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>
      <li>9</li>
      <li>10</li>
      <li>10</li>
      <li>10</li>
     </ul>
    </div>
   </div>
  </div>

  
 <script type="text/javascript">
  var sl = function(id){ return document.getElementById(id)}
  var speed = 0;
  var timer = null;
  var i=0;
  function slProdust(){
   var slchanpingCon01 = sl("slchanpingCon01").getElementsByTagName("li");
   var slElem = sl("slchanpingCon01");
   var slDivWidth = slchanpingCon01[0].offsetWidth * slchanpingCon01.length;
    slElem.style.width = slDivWidth +"px";
    function autoFunc(){
     if(speed   >  -slDivWidth ){
      speed--;

      slElem.style.left = speed + "px"
     }
     else{

      clearTimeout(timer);
     }
     timer = setTimeout(function(){autoFunc()},10);
    }
    autoFunc();
  }
  slProdust();
 </script>
 </body>
</html>