简单模仿拉钩网上的“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来获得目标就行。
简单模仿拉钩网上的“hot_info”的更多相关文章
- 爬取拉钩网上所有的python职位
# 2.爬取拉钩网上的所有python职位. from urllib import request,parse import json,random def user_agent(page): #浏览 ...
- react-native 模仿原生 实现下拉刷新/上拉加载更多（RefreshListView）
1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...
- RecyclerView下拉刷新上拉加载（三）—对Adapter的封装
RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...
- RecyclerView 下拉刷新上拉加载
步骤: 首先直接定义一个XRecyclerView继承RecyclerView,重写他的三个构造方法. init(Context mContext)方法用来初始化底部加载的view 回到XRecycl ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- ListView下拉刷新上拉加载更多实现
这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...
- listview下拉刷新上拉加载扩展（三）-仿最新版美团外卖
本篇是基于上篇listview下拉刷新上拉加载扩展(二)-仿美团外卖改造而来,主要调整了headview的布局,并加了两个背景动画,看似高大上,其实很简单: as源码地址:http://downloa ...
随机推荐
- Spring Boot + Swagger
前言: 在互联网公司, 微服务的使用者一般分为两种, 客户端和其他后端项目(包括关联微服务),不管是那方对外提供文档 让别人理解接口 都是必不可少的.传统项目中一般使用wiki或者文档, 修改繁琐,调 ...
- NOIP2013 提高组 Day2
期望得分:100+100+30+=230+ 实际得分:100+70+30=200 T2 觉得题目描述有歧义: 若存在2i却不存在2i+1,自己按不合法做的,实际是合法的 T3 bfs 难以估分 虽然 ...
- CF851 D 枚举 思维
给出n个数,你可以对每个数把它变为0,或者增加1,分别需要花费x, y.问把所有数的GCD变为不为1的最小花费是多少. n的范围5x1e5,a[i]的范围1e6. 开始想通过枚举最终gcd值,然后通过 ...
- 郑轻校赛 2127 tmk射气球 （数学）
Description 有一天TMK在做一个飞艇环游世界,突然他发现有一个气球匀速沿直线飘过,tmk想起了他飞艇上有一把弓,他打算拿弓去射气球,为了提高射击的准确性,他首先在飞艇上找到一个离气球最近的 ...
- 机器学习-kNN-寻找最好的超参数
一 .超参数和模型参数 超参数:在算法运行前需要决定的参数 模型参数:算法运行过程中学习的参数 - kNN算法没有模型参数- kNN算法中的k是典型的超参数 寻找好的超参数 领域知识 经验数值 实验搜 ...
- LintCode之二叉树的最大节点
分治问题,可以把整棵树看做是由一颗颗只有三个节点组成的小树,一颗树的构成是根节点.左子树.右子树,这样只需要从左子树找出一个最大的节点,从右子树找出一个最大的节点,然后与根节点三个取个最大的,就是最终 ...
- NASA: SpaceX的猎鹰９号火箭将龙飞船发射到国际空间站
At 5:42 a.m. EDT Friday, June 29, 2018, SpaceX’s Dragon spacecraft lifts off on a Falcon 9 rocket fr ...
- 商城项目（ssm+dubbo+nginx+mysql统合项目）总结（4）
我不会在这里贴代码和详细步骤什么的,我觉得就算我把它贴出来,你们照着步骤做还是会出很多问题,我推荐你们去看一下黑马的这个视频,我个人感觉很不错,一步一步走下来可以学到很多东西.另外,视频和相关文档的话 ...
- ORACLE ASM中查询表空间使用情况、数据文件路径、裸设备磁盘总大小剩余大小
在ASM中:查询所有磁盘名称.总大小.剩余大小:单位MB-----查看组的信息(总大小)select name,total_mb, free_mb from v$asm_diskgroup; ---查 ...
- （转）USB体系结构
转载地址:http://blog.ednchina.com/zenhuateng/203584/Message.aspx USB总线接口层:物理连接.电气信号环境.信息包传输机制:主机一方由USB主控 ...