imusic.github.com/hover.html at master · iMusic/imusic.github.com · 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style>
.box {
	float:left;margin:5px;position:relative;width:120px;height:100px;border:1px solid #DDD;overflow:hidden;
}
.inner {
	position:absolute;width:100%;height:100%;background:rgba(1,152,117,0.9);
}
</style>
</head>
<body>
<div style="margin:50px auto;width:400px;overflow:hidden;">
	<div class="box">
		<div style="width:120px;height:100px;"></div>
		<div id="inner" class="inner">OXoxoxox</div>
	</div>
	<div class="box">
		<div style="width:150px;height:100px;"></div>
		<div id="inner" class="inner">OXgfhdfox</div>
	</div>
	<div class="box">
		<div style="width:120px;height:100px;"></div>
		<div id="inner" class="inner">O111````xoxox</div>
	</div>
	<div class="box">
		<div style="width:120px;height:100px;"></div>
		<div id="inner" class="inner">O`12221xox</div>
	</div>
	<div class="box" style="width:220px;height:200px;">
		<div style="width:220px;height:200px;"></div>
		<div id="inner" class="inner">`11``1oxox</div>
	</div>
</div>
<script>
var boxs = document.querySelectorAll('.box');


[].slice.call(boxs).forEach(function(v, k) {
	;(function(box) {
		var w = box.offsetWidth;
		var h = box.offsetHeight;
		var cx = (box.offsetLeft + w / 2);
		var cy = (box.offsetTop + h / 2);
		var inner = box.querySelector('.inner');
		var timer = null;
		box.onmouseenter = box.onmouseleave = function(e) {
			var mx = e.pageX;
			var my = e.pageY;

			var x = (mx - cx) * (w > h ? (h / w) : 1);
			var y = (my - cy) * (h > w ? (w / h) : 1);

			var d = Math.round(((Math.atan2(y, x) * 180 / Math.PI + 180)  / 90)) % 4;
			var styleCss = getStyle(d);

			if (e.type == 'mouseenter') {
				inner.style.cssText = styleCss.from;
				clearTimeout(timer);
				timer = setTimeout(function() {
					inner.style.transition = 'all 300ms ease';
					inner.style.cssText += styleCss.to;
				}, 0);
			} else {
				clearTimeout(timer);
				inner.style.cssText += styleCss.from;
			}
		}
	})(v);
});


// var fromTop = {left: 0, top: '-100%'},
// 	fromLeft = {left: '-100%', top: 0},
// 	fromBottom = {left: 0, top: '100%'},
// 	fromRight = {left: '100%', top: 0},
// 	toTop = {top: 0},
// 	toLeft = {left: 0};


function getStyle(d) {
	var fromTop = 'left: 0; top: -100%;',
		fromLeft = 'left: -100%; top: 0',
		fromBottom = 'left: 0; top: 100%',
		fromRight = 'left: 100%; top: 0',
		toTop = 'top: 0',
		toLeft = 'left: 0';

	var fromStyle, toStyle;
	switch(d) {
		case 0:
			fromStyle = fromLeft;
			toStyle = toLeft;
			break;
		case 1:
			fromStyle = fromTop;
			toStyle = toTop;
			break;
		case 2:
			fromStyle = fromRight;
			toStyle = toLeft;
			break;
		case 3:
			fromStyle = fromBottom;
			toStyle = toTop;
			break;
	}
	return {from : fromStyle, to : toStyle};
}
</script>
</body>
</html>