Skip to content

Instantly share code, notes, and snippets.

@Jesterovskiy

Jesterovskiy/space.html

Created December 26, 2016 10:15
Show Gist options
  • Save Jesterovskiy/14d32873ce275746686c06769af6b419 to your computer and use it in GitHub Desktop.
Save Jesterovskiy/14d32873ce275746686c06769af6b419 to your computer and use it in GitHub Desktop.
Download ZIP
space.html
Raw
space.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "windows-1251">
<link type="text/css" rel="stylesheet" href="space.css">
<title>Space
</title>
</head>
<body>
<article>
<img src = "img/img1.png" style = "position:relative" id = "img1">
<img src = "img/img2.png" style = "position:relative" id = "img2">
<img src = "img/img3.png" style = "position:relative" id = "img3">
<img src = "img/img4.png" style = "position:relative" id = "img4">
<img src = "img/img5.png" style = "position:relative" id = "img5">
<img src = "img/img6.png" style = "position:relative" id = "img6">
<img src = "img/img7.png" style = "position:relative" id = "img7">
<img src = "img/img8.png" style = "position:relative" id = "img8">
<input type = "button" id = "button" onclick = "tl()">
</article>
<script>
function Tramp(w,h,r,s,c){
this.width = w;
this.height = h;
this.radius = r;
this.step = s;
this.face = c;
this.show = function(x,y){
this.face.style.width = w;
this.face.style.height = h;
this.face.style.top = x;
this.face.style.left = y;
};
this.go1 = function () {
var a = parseInt(this.face.style.left);
var b = parseInt(this.face.style.top);
var r = 63;
var q = 10;
PI2 = Math.PI * 2;
dA = PI2 / 110;
img1 = document.getElementById('img1');
var interval1 = setInterval(function() {
img1.style.left = Math.round(a + r * Math.cos(q)) + 'px';
img1.style.top = Math.round(b + r * Math.sin(q)) + 'px';
q += dA;
if (q >= PI2) q -= PI2;
else if (q < 0) q += PI2;
}, 140);
};
this.go2 = function () {
var a = parseInt(this.face.style.left);
var b = parseInt(this.face.style.top);
var r = 80;
var q = 0;
PI2 = Math.PI * 2;
dA = PI2 / 30;
img2 = document.getElementById('img2');
var interval2 = setInterval(function() {
img2.style.left = Math.round(a + r * Math.cos(q)) + 'px';
img2.style.top = Math.round(b + r * Math.sin(q)) + 'px';
q += dA;
if (q >= PI2) q -= PI2;
else if (q < 0) q += PI2;
}, 140);
};
this.go3 = function () {
var a = parseInt(this.face.style.left);
var b = parseInt(this.face.style.top);
var r = 108;
var q = 0;
PI2 = Math.PI * 2;
dA = PI2 / 30;
img3 = document.getElementById('img3');
var interval3 = setInterval(function() {
img3.style.left = Math.round(a + r * Math.cos(q)) + 'px';
img3.style.top = Math.round(b + r * Math.sin(q)) + 'px';
q += dA;
if (q >= PI2) q -= PI2;
else if (q < 0) q += PI2;
}, 140);
};
this.go4 = function () {
var a = parseInt(this.face.style.left);
var b = parseInt(this.face.style.top);
var r = 138;
var q = 0;
PI2 = Math.PI * 2;
dA = PI2 / 130;
img4 = document.getElementById('img4');
var interval4 = setInterval(function() {
img4.style.left = Math.round(a + r * Math.cos(q)) + 'px';
img4.style.top = Math.round(b + r * Math.sin(q)) + 'px';
q += dA;
if (q >= PI2) q -= PI2;
else if (q < 0) q += PI2;
}, 140);
};
this.go5 = function () {
var a = parseInt(this.face.style.left);
var b = parseInt(this.face.style.top);
var r = 193;
var q = 0;
PI2 = Math.PI * 2;
dA = PI2 / 130;
img5 = document.getElementById('img5');
var interval5 = setInterval(function() {
img5.style.left = Math.round(a + r * Math.cos(q)) + 'px';
img5.style.top = Math.round(b + r * Math.sin(q)) + 'px';
q += dA;
if (q >= PI2) q -= PI2;
else if (q < 0) q += PI2;
}, 140);
};
this.go6 = function () {
var a = parseInt(this.face.style.left);
var b = parseInt(this.face.style.top);
var r = 228;
var q = 0;
PI2 = Math.PI * 2;
dA = PI2 / 80;
img6 = document.getElementById('img6');
var interval6 = setInterval(function() {
img6.style.left = Math.round(a + r * Math.cos(q)) + 'px';
img6.style.top = Math.round(b + r * Math.sin(q)) + 'px';
q += dA;
if (q >= PI2) q -= PI2;
else if (q < 0) q += PI2;
}, 140);
};
this.go7 = function () {
var a = parseInt(this.face.style.left);
var b = parseInt(this.face.style.top);
var r = 262;
var q = 10;
PI2 = Math.PI * 2;
dA = PI2 / 80;
img7 = document.getElementById('img7');
var interval7 = setInterval(function() {
img7.style.left = Math.round(a + r * Math.cos(q)) + 'px';
img7.style.top = Math.round(b + r * Math.sin(q)) + 'px';
q += dA;
if (q >= PI2) q -= PI2;
else if (q < 0) q += PI2;
}, 140);
};
this.go8 = function () {
var a = parseInt(this.face.style.left);
var b = parseInt(this.face.style.top);
var r = 300;
var q = 9;
PI2 = Math.PI * 2;
dA = PI2 / 80;
img8 = document.getElementById('img8');
var interval8 = setInterval(function() {
img8.style.left = Math.round(a + r * Math.cos(q)) + 'px';
img8.style.top = Math.round(b + r * Math.sin(q)) + 'px';
q += dA;
if (q >= PI2) q -= PI2;
else if (q < 0) q += PI2;
}, 140);
};
}
var img1 = document.getElementById('img1');
var tramp1 = new Tramp('21px','21px','50px','10',img1);
tramp1.show('308px','320px');//top and left
var img2 = document.getElementById('img2');
var tramp2 = new Tramp('25px','25px','50px','10',img2);
tramp2.show('306px','295px');//top and left
var img3 = document.getElementById('img3');
var tramp3 = new Tramp('54px','54px','50px','10',img3);
tramp3.show('291px','254px');//top and left
var img4 = document.getElementById('img4');
var tramp4 = new Tramp('37px','37px','50px','10',img4);
tramp4.show('301px','210px');//top and left
var img5 = document.getElementById('img5');
var tramp5 = new Tramp('75px','75px','50px','10',img5);
tramp5.show('284px','154px');//top and left
var img6 = document.getElementById('img6');
var tramp6 = new Tramp('75px','75px','50px','10',img6);
tramp6.show('281px','82px');//top and left
var img7 = document.getElementById('img7');
var tramp7 = new Tramp('54px','54px','50px','10',img7);
tramp7.show('293px','15px');//top and left
var img8 = document.getElementById('img8');
var tramp8 = new Tramp('52px','52px','50px','10',img8);
tramp8.show('293px','-38px');//top and left
function tl(){
document.getElementById('button').style.display = 'none';
tramp1.go1();
tramp2.go2();
tramp3.go3();
tramp4.go4();
tramp5.go5();
tramp6.go6();
tramp7.go7();
tramp8.go8();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment