简单模仿拉钩网上的“hot_info”
前言
突然想起来之前看到拉钩网上的hot_info
(不知道该叫什么,但是拉钩网上这个div
的class
是hot_info
),感觉实现起来还是比较轻松简单的,效果也不错,于是简单模仿了一下。就不截图了,有兴趣的可以去拉钩网看看效果。模仿的效果可以点这里。
技术
主要是用了jQuery。动画部分是animate()
来实现的。
判断进入div
的方向
首先用jQuery的offset()
方法获得元素相对于页面的坐标;然后用event
对象的pageX
和pageY
属性,这是鼠标进入元素的相对于页面的坐标。要注意的是这两个坐标的值都是浮点型(当然也有直接进入div
内部的情况,鼠标滚轮啊之类的),显然只能比较距离,判断距离最近的就是进入的方向。
function judgeD(item, event) {
//判斷方向
var $this = $(item);
var outx = event.pageX;
var outy = event.pageY;
var offset = $this.offset();
var itemx = offset.left;
var itemy = offset.top;
var width = parseInt($this.css('width'));
var height = parseInt($this.css('height'));
var min = {
d: 'left',
val: Math.abs(outx - itemx)
}
var tempVal = Math.abs(outy - itemy);
if (tempVal < min.val) {
min.d = 'top';
min.val = tempVal;
}
var tempVal = Math.abs(outx - width - itemx);
if (tempVal < min.val) {
min.d = 'right';
min.val = tempVal;
}
var tempVal = Math.abs(outy - height - itemy);
if (tempVal < min.val) {
min.d = 'bottom';
min.val = tempVal;
}
return min.d;
};
动画
动画就不多说了。。,这个方法有些太长了。其中的flag是为了在快速移出移入的时候不闪烁,并且更自然一些。
function move($target, d, f, flag) {
$target.show().stop(true);
if (!flag) {
switch(f) {
case 'left':
$target.css({
top: 0,
left: '-100%'
});
break;
case 'right':
$target.css({
top: 0,
left: '200%'
});
break;
case 'top':
$target.css({
top: '-100%',
left: 0
});
break;
case 'bottom':
$target.css({
top: '200%',
left: 0
});
break;
case 'center':
$target.css({
top: 0,
left: 0
});
break;
}
}
var easing = 'swing';
switch(d) {
case 'left':
$target.animate({
top: 0,
left: '-100%'
}, {
speed: 500,
easing: easing,
});
break;
case 'right':
$target.animate({
top: 0,
left: '200%'
}, {
speed: 500,
easing: easing,
});
break;
case 'top':
$target.animate({
top: '-100%',
left: 0
}, {
speed: 500,
easing: easing,
});
break;
case 'bottom':
$target.animate({
top: '200%',
left: 0
}, {
speed: 500,
easing: easing,
});
break;
case 'center':
$target.animate({
top: 0,
left: 0
}, {
speed: 500,
easing: easing,
});
break;
}
}
绑定事件
$(function() {
$('.test_item').hover(function(event) {
var d = judgeD(this, event);
var $target = $(this).find('.test_inner');
move($target, 'center', d);
}, function(event) {
var d = judgeD(this, event);
var $target = $(this).find('.test_inner');
move($target, d, 'center', true);
});
});
css
html, body {
width: 100%;
height: 100%;
}
.test_item {
width: 30%;
height: 30%;
overflow: hidden;
background: #333;
position: relative;
float: left;
margin: 15px;
}
.test_item .test_inner {
width: 100%;
height: 100%;
top: 100%;
left: 100%;
background: #1fa67a;
position: absolute;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<!-- Emmet -->
(.test_item>.test_inner)*12
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
</body>
</html>
还需改进的地方
除了有个方法太长了,还有其他一些需要改进的地方(其实是太懒了懒得改了):
- 首先是污染了全局环境,闭包或者封装成对象都可解决。
- 绑定的事件有点多(是指每一个
.test_item
元素上都绑定了两个事件处理函数)。因为mouseover
和mouseout
是会冒泡的,因此增加一个包装层,在包装层上绑定事件,再用event.target
来获得目标就行。