前言

突然想起来之前看到拉钩网上的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>

还需改进的地方

除了有个方法太长了，还有其他一些需要改进的地方（其实是太懒了懒得改了）：

  1. 首先是污染了全局环境，闭包或者封装成对象都可解决。
  2. 绑定的事件有点多（是指每一个.test_item元素上都绑定了两个事件处理函数）。因为mouseover和mouseout是会冒泡的，因此增加一个包装层，在包装层上绑定事件，再用event.target来获得目标就行。

简单模仿拉钩网上的“hot_info”的更多相关文章

  1. 爬取拉钩网上所有的python职位

    # 2.爬取拉钩网上的所有python职位. from urllib import request,parse import json,random def user_agent(page): #浏览 ...

  2. react-native 模仿原生 实现下拉刷新/上拉加载更多（RefreshListView）

    1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...

  3. RecyclerView下拉刷新上拉加载（三）—对Adapter的封装

    RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...

  4. RecyclerView 下拉刷新上拉加载

    步骤: 首先直接定义一个XRecyclerView继承RecyclerView,重写他的三个构造方法. init(Context mContext)方法用来初始化底部加载的view 回到XRecycl ...

  5. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  6. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  7. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  8. ListView下拉刷新上拉加载更多实现

    这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...

  9. listview下拉刷新上拉加载扩展（三）-仿最新版美团外卖

    本篇是基于上篇listview下拉刷新上拉加载扩展(二)-仿美团外卖改造而来,主要调整了headview的布局,并加了两个背景动画,看似高大上,其实很简单: as源码地址:http://downloa ...

随机推荐

  1. 谷歌地图 API 开发之添加标记（解析以及补充）

    今天又看了下官网,发现官网上有地图标记的详细说明.当时居然眼瞎看不见,还琢磨了好久...#$%^&,一定是项目太急,没看到(^o^)/~地址:https://developers.google ...

  2. 2017北京国庆刷题Day6 afternoon

    期望得分:100+100+40=240 实际得分:100+0+40=140 二进制拆分.二进制前缀和 #include<cstdio> #include<iostream> u ...

  3. bzoj 3678 wangxz与OJ

    3678: wangxz与OJ Time Limit: 10 Sec  Memory Limit: 128 MBhttp://www.lydsy.com/JudgeOnline/problem.php ...

  4. ZOJ 3774 Fibonacci的K次方和

    In mathematics, Fibonacci numbers or Fibonacci series or Fibonacci sequence are the numbers of the f ...

  5. [php]http的状态码

    1.分类 100~199 表示成功接受请求,要求客户端继续提交下一次请求才能完成整个过程处理. 200~299 表示成功接收请求并已完成整个处理过程,常用200 300~399 为完成请求,客户需进一 ...

  6. 集合框架小结-Collection

    1.集合框架作为处理对象的容器存在,基本接口是Collection,相对于数组而言的话,集合框架只能存储对象,但是长度是可变的.集合框架的关系图如下: 主要的内容是list.set.map, List ...

  7. CodeForces - 999C

    You are given a string ss consisting of nn lowercase Latin letters. Polycarp wants to remove exactly ...

  8. mongoose使用简记

    mongodb中集合相当于表,常用指令 mongo 进入数据库 use yourdatabase 来选择你的数据集,这个跟关系型中的一样 show collections 来查看你数据集中的表,col ...

  9. php常用函数——字符串函数

    php常用函数——字符串函数

  10. Redis—初探Redis

    一.什么是Redis? 学习Redis最好的是看官网了,下面是Redis的官网对Redis的介绍 可见,Redis是一个内存存储的数据结构服务器,可以用作数据库.缓存等.支持的数据结构也很丰富,有字符 ...