js 文本滾動(dòng)效果的實(shí)例代碼

2024-05-06 15:50:43

字體：大中小

供稿：網(wǎng)友

一個(gè)簡(jiǎn)單的滾動(dòng)效果，我只測(cè)試了文本，對(duì)于圖片有需要的朋友可以測(cè)試一下哦

復(fù)制代碼代碼如下:

<!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>
   <div></div>
   <div>
    <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>
      <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>