js_animation/JS_animation.html at main · paras081/js_animation · GitHub

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
54
55
56
57
58
59
60
61
62
63
<html>
    <head>
		<title>JS animation</title>
        <style>
            #container{
                width: 400px;
                height: 400px;
                position: absolute;
                background:#f1d4d4;
            }
            #animateObj{
                width: 50px;
                height: 50px;
                position:relative;
                background: #e6739f;
            }
        </style>
	</head>
	<body>
            <p>
                <button onclick="myAnim()">StartAnimate</button>
            </p>

            <div id="container">
                <div id="animateObj"></div>
            </div>
        <script type="text/javascript">

            function myAnim(){
                var elem =  document.getElementById("animateObj");
                var pos=0,pos2=0,pos3=350,pos4=350;
                var id = setInterval(frame,2);

                function frame(){
                    if(pos < 350){
                        pos++;
                        elem.style.left=pos+"px";
                    }else if(pos2<350){
                        pos2++;
                        elem.style.top=pos2+"px";
                    }else if(pos3 > 0){
                        pos3--;
                        elem.style.left= pos3+"px";
                    }else if(pos4 > 0){
                        pos4--;
                        elem.style.top=pos4+"px";
                    }else{
                        pos=0,pos2=0,pos3=350,pos4=350;
                    }
                }
           }
        </script>
	</body>
</html>