js文字列表无缝滚动代码


image



<!DOCTYPE html>

<html>

<head>

 <meta charset="utf-8">

 <meta name="author" content="" />

 <title>文字列表无缝滚动代码</title>

 <style type="text/css">

  *{

   margin:0px;

   padding:0px;

   border:0px;

  }

  body{font-size:12px}

  #demo{

   overflow:hidden;

   height:80px;

   width:280px;

   margin:90px auto;

   position:relative;

  }

  #demo1{

   height:auto;

   text-align:left;

  }

  #demo2{

   height:auto;

   text-align:left;

  }

  #demo1 li{

   list-style-type:none;

   height:22px;

   text-align:left;

   text-indent:15px;

  }

  #demo2 li{

   list-style-type:none;

   height:22px;

   text-align:left;

   text-indent:15px;

  }

 </style>

</head>

<body>

<div id="demo">

 <ul id="demo1">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

  <li>6</li>

  <li>7</li>

 </ul>

 <div id="demo2"></div>

</div>

 

<script type="text/javascript">

 var speed=40

  // 向上滚动

  var demo=document.getElementById("demo");

  var demo2=document.getElementById("demo2");

  var demo1=document.getElementById("demo1");

  demo2.innerHTML=demo1.innerHTML

  function Marquee(){

   if(demo.scrollTop>=demo1.offsetHeight){

    demo.scrollTop=0;

   }

   else{

    demo.scrollTop=demo.scrollTop+1;

   }

  }

  var MyMar=setInterval(Marquee,speed)

  demo.onmouseover=function(){clearInterval(MyMar)}

  demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}

 

</script>

</body>

</html>


微信扫码咨询
建站咨询
cache
Processed in 0.009994 Second.