-
Notifications
You must be signed in to change notification settings - Fork 0
/
animate.html
123 lines (106 loc) · 3.82 KB
/
animate.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEMO</title>
<style>
html, body, div{padding:0; margin:0;}
.demo{position: relative; width: 800px; height: 600px; margin:20px auto; border:1px solid #d4d4d4; overflow: hidden;}
.demo div{position: absolute;}
.left-block, .right-block{width: 400px; height: 600px; top:0;}
.left-block{left:0;}
.right-block{right:0;}
.animiate-item{position: absolute; width: 400px; background-repeat: no-repeat; background-position: center center;}
.middle-dot{width: 60px; height: 60px; background:#f60; border-radius:50%; z-index: 100; left:50%; margin-left: -30px; top:50%; margin-top: -30px; text-align: center; line-height: 60px; font-size: 28px; color:#fff; font-weight: bold; cursor: pointer;}
.left-top{height: 600px; background-image: url('http://beoplay.cn/assets/img/s3/black_1.png'); background-color: #ccc; background-size:300px;}
.left-bottom{bottom:-300px; height: 300px; background-image: url('http://beoplay.cn/assets/img/s3/blue_1.png'); background-color: #ade3f1; background-size:150px;}
.right-top{height: 600px; background-image: url('http://beoplay.cn/assets/img/s3/green_1.png'); background-color: #f1adad; background-size:300px;}
.right-bottom{bottom:-300px; height: 300px; background-image: url('http://beoplay.cn/assets/img/s3/grey_1.png'); background-color: #f1daad; background-size:150px;}
.left-x-top, .left-x-bottom, .right-x-top, .right-x-bottom{height: 0; width: 0; z-index: 100; background-size:150px;}
.left-x-top{left:0; top:0;}
.left-x-bottom{left:0; bottom:0;}
.right-x-top{right:0; top:0;}
.right-x-bottom{right: 0; bottom:0;}
</style>
</head>
<body>
<div class="demo">
<div class="left-block js-left-block">
<div class="animiate-item left-top js-left-top"></div>
<div class="animiate-item left-top left-x-top js-left-x-top"></div>
<div class="animiate-item left-bottom js-left-bottom"></div>
<div class="animiate-item left-bottom left-x-bottom js-left-x-bottom"></div>
</div>
<div class="right-block js-right-block">
<div class="animiate-item right-top js-right-top"></div>
<div class="animiate-item right-top right-x-top js-right-x-top"></div>
<div class="animiate-item right-bottom js-right-bottom"></div>
<div class="animiate-item right-bottom right-x-bottom js-right-x-bottom"></div>
</div>
<div class="middle-dot js-dot"></div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
var animateBlockArr = [$('.js-left-x-top'), $('.js-left-x-bottom'), $('.js-right-x-top'), $('.js-right-x-bottom')];
var animateWidthArr = [0, 400];
var animateHeightArr = [0, 300];
var bgColorsArr = ['#d5b475', '#7577d5', '#d5d475', '#8ed575', '#d575c9', '#a475d5', '#d5758e', '#7dbd89'];
var clickAmount = 0;
$('.js-dot').on('click', function(){
clickAmount++;
if(clickAmount == 1){
$('.js-right-top').animate({
height: 300,
backgroundSize: 150
});
$('.js-right-bottom').animate({
bottom: 0
});
}
if(clickAmount == 2){
$('.js-left-top').animate({
height: 300,
backgroundSize: 150
});
$('.js-left-bottom').animate({
bottom: 0
});
}
if(clickAmount > 2){
singmeAnimate();
singmeAnimate();
}
$(this).text(clickAmount);
});
function singmeAnimate(){
var randomIndex = RandomNum(0, 3);
var initWidth = animateWidthArr[RandomNum(0, 1)];
var initHeight = animateHeightArr[RandomNum(0, 1)];
if(!initWidth && !initHeight){
initHeight = 300;
}
if(initWidth && initHeight){
initWidth = 0;
}
animateBlockArr[randomIndex].
css({
width: initWidth,
height:initHeight,
}).
animate({
width: 400,
height: 300
}).
css({
backgroundColor: bgColorsArr[RandomNum(0, 8)]
});
}
function RandomNum(Min, Max){
var Range = Max - Min;
var Rand = Math.random();
var num = Min + Math.round(Rand * Range);
return num;
}
</script>
</body>
</html>