你的位置:首页 > Java教程

[Java教程]javascript 广告移动特效


<!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 class="box3">    <div id="box" class="box2">      </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>