javascript 廣告移動特效的實現(xiàn)代碼
來源:易賢網 閱讀:641 次 日期:2016-07-12 15:53:22
溫馨提示:易賢網小編為您整理了“javascript 廣告移動特效的實現(xiàn)代碼”,方便廣大網友查閱!

下面小編就為大家?guī)硪黄猨avascript 廣告移動特效的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。

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

以上就是小編為大家?guī)淼膉avascript 廣告移動特效的實現(xiàn)代碼全部內容了

更多信息請查看網絡編程

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網