在特定范围内循环上下左右平移的图层特效-JS特效-爱易网页

在特定范围内循环上下左右平移的图层特效

日期：2014-05-18　浏览次数：20235 次

以下是程序代码

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

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]