走口字

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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>

 

  

posted @   miyaye  阅读(166)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示

随笔分类 (122)