javascript 广告移动特效的实现代码

2019-11-20 09:36:22

字体：大中小

来源：转载

供稿：网友

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

以上就是小编为大家带来的javascript 广告移动特效的实现代码全部内容了，希望大家多多支持武林网~

上一篇：浅谈JQuery+ajax+jsonp 跨域访问

下一篇：jQuery+CSS3文字跑马灯特效的简单实现