javascript 廣告移動(dòng)特效的實(shí)現(xiàn)代碼

字號(hào):


    下面小編就為大家?guī)?lái)一篇javascript 廣告移動(dòng)特效的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        .box2{}
        .box2{width: 200px; height: 200px; background: red; border-radius: 50%;position: relative;}
        .box3{width: 800px; height: 500px; border:1px solid red;}
      </style>
    </head>
    <body>
    <button type="" id="start">開始</button>
    <button type="" id="stop">停止</button>
    <div>
      <div id="box">
      </div>
      </div>
    </body>
    <script type="text/javascript">
      var lr=600;
      var tb=300;
      var i=0;
      var j=0;
      var box=document.getElementById('box');
      var start=document.getElementById('start');
      var stop=document.getElementById('stop');
      start.onclick=function(){
        start.style.display='none';
        stop.style.display='inline';
        var time=setInterval(function(){
          box.style.left=i+'px';
          box.style.top=j+'px';
          if (i>lr) {
            lr=0;
            i--;
          }
          if(i<=lr){
            lr=600;
            i++;
          }
          if (j>tb) {
            tb=0;
            j--;
          }
          if (j<=tb) {
            tb=300;
            j++
          }
          stop.onclick=function(){
            clearInterval(time);
            stop.style.display='none';
            start.style.display='inline';
          }
        },5);
      }
    </script>
    </html>
    以上就是小編為大家?guī)?lái)的javascript 廣告移動(dòng)特效的實(shí)現(xiàn)代碼全部?jī)?nèi)容了