简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:814 次  日期:2016-07-12 15:53:22

温馨提示:易贤网小编为您整理了“javascript 广告移动特效的实现代码”,方便广大网友查阅!

下面小编就为大家带来一篇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>

以上就是小编为大家带来的javascript 广告移动特效的实现代码全部内容了

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:浅谈JQuery+ajax+jsonp 跨域访问
下一篇:jQuery+CSS3文字跑马灯特效的简单实现
易贤网手机网站地址:javascript 广告移动特效的实现代码
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!