<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>走口字</title>
<meta name="author" content="Administrator" />
<!-- Date: 2015-04-20 -->
<script src="jquery-1.11.1.js"></script>
<style>
#div1{width:500px;height:500px;margin:40px auto;position:relative;border:1px solid black}
#div2{width:100px;height:100px;position: absolute;background:red}
</style>
<script>
$(function(){
var $div1 = $('#div1');
var $div2 = $('#div2');
var dir=['left','top','left','top'];
var speed=[10,10,-10,-10];// 往右边速度10 往下速度10 往左速度-10 往上速度-10
var target=[400,400,0,0];//往右终点400 往下终点400 往左终点0 往上终点0
var iNow=0;
var nowVal=0;
setInterval(function(){
nowVal = $div2.position()[dir[iNow]] + speed[iNow];//终点=当前值 + 速度
$div2.css(dir[iNow],nowVal);//$div2 运动到 方向dir[iNow] 终点 nowVal
if( Math.abs(nowVal - target[iNow] )<=1){//给个小误差 当前值 和 目标值 距离小于等于1就可以行走
if( iNow==3 ){
iNow=0 //当iNow ==3的时候 iNow还原成0 那么div2就会循环走口字
}else{
iNow++ //当走到目标点的时候iNow++
}
}
},30)
})
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
