JS制作循环上下左右平移转圈的图层特效

稿源：互联网 2018-09-03 21:13:50 点击： 8670 撤稿纠错

点击开始按钮，该DIV就会向右平移50px后停止0.5秒再向右平移50px，再向下平移50px，再向下平移50px，再向左平移50px。。。。

以下讨论的是和循环平移相关的JS制作循环上下左右平移转圈的图层特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  #playbox{ width:500px; height:500px; background:#09F; position:relative}
  #box{ width:50px; height:50px; background:#FFF; position:absolute; top:50px; left:50px;}
 </style>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
 <div id="playbox">
  <div id="box" dir="e"></div>
  <button type="button" id="btn">开始</button>
 </div>
 <script type="text/javascript">
  function play(){
   var n = 100; //偏移距离（单位：像素）
   var t = 0.5; //停顿时间（单位：秒）
   var $box = $('#box');
   var dir = $box.attr('dir') || 'e';
   switch(dir){
    case 'e':
     $box.animate({left: '+='+ n +'px'});
     dir = 's';
     break;
    case 's':
     $box.animate({top: '+='+ n +'px'});
     dir = 'w';
     break;
    case 'w':
     $box.animate({left: '-='+ n +'px'});
     dir = 'n';
     break;
    case 'n':
     $box.animate({top: '-='+ n +'px'});
     dir = 'e';
     break;
   }
   $box.attr('dir',dir);
   window.fn = setTimeout(function(){
    play();
   },t*1000);
  }
  $(document).ready(function(e) {
   $('#btn').click(function(){
    if($(this).html()=='开始'){
     $(this).html('停止');
     play();
    }
    else{
     clearTimeout(fn);
     $(this).html('开始');
    }
   });
  });
 </script>
</body>
</html>

关于JS制作循环上下左右平移转圈的图层特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090392034.shtml方便下次再访问哦。

·上一篇： js+canvas制作的用鼠标绘制圆形图案，可叠加产生不同色彩HTML5特效
·下一篇： 利用JQUERY+canvas制作的随机乱撞的彩色圆球JS特效代码

JS制作循环上下左右平移转圈的图层特效

文章分类LIST >>返回首页

最新游戏

最新新闻