-
Notifications
You must be signed in to change notification settings - Fork 0
/
fangxiang-demo.html
54 lines (47 loc) · 2.13 KB
/
fangxiang-demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
* {padding: 0;margin: 0;}
ul {list-style: none; position: relative;font-size: 0;width: 600px;margin: 50px auto 0;}
ul > li {position: relative;width: 300px;height: 300px;background-color: rgb(213,213,213);display: inline-block;margin: 10px;overflow: hidden;}
ul > li .bg {position: absolute;width: 100px;height: 100px;left: -100%;top: 0;background-color: rgb(212,23,222);text-align: center;line-height: 100px;cursor: pointer;color: #fff;font-size: 20px;}
.line{position: absolute;width: 50%;height: 1px;background: red;right: 0;top: 50%;transition: all .3s;transform-origin:left; }
</style>
</head>
<body>
<ul>
<li>
<div class="bg">
js
</div>
<span class='line'></span>
</li>
</ul>
<div class="res"></div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$("li").on("mouseenter mouseleave",function(e) {
var w = this.offsetWidth;
var h = this.offsetHeight;
var x = e.pageX - this.getBoundingClientRect().left - w/2;
var y = e.pageY - this.getBoundingClientRect().top - h/2;
var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
var eventType = e.type;
var res = Math.atan2(y, x) / (Math.PI / 180) + 180 ;
$('.line').css('transform','rotate('+ res +'deg)');
// console.log(((Math.atan2(y, x) * 180 / Math.PI) + 180));
console.log(Math.round((Math.atan2(y, x) / (Math.PI / 180) + 180) / 90 + 3) % 4);
var dirName = new Array('上方','右侧','下方','左侧');
$('.res').text(res + 'deg');
if(eventType == 'mouseenter'){
console.log(dirName[direction]+'进入');
}else{
console.log(dirName[direction]+'离开');
}
});
</script>
</body>
</html>