文字无缝滚动 上下

html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="author" content="http://www.softwhy.com/" />
  <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>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
    <li>6li>
    <li>7li>
  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.οnmοuseοver=function(){clearInterval(MyMar)}
    demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}


  //向下滚动
  // demo2.innerHTML=demo1.innerHTML
  // demo.scrollTop=demo.scrollHeight
  // function Marquee2(){
  //   if(demo1.offsetTop-demo.scrollTop>=0)
  //     demo.scrollTop+=demo2.offsetHeight
  //   else{
  //     demo.scrollTop--
  //   }
  // }
  // var MyMar2=setInterval(Marquee2,speed)
  // demo.οnmοuseοver=function() {clearInterval(MyMar2)}
  // demo.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}
script>
body>
html>

你可能感兴趣的:(js,html)