前言

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

    期望得分:30+90+100=220 实际得分:30+0+10=40 T1智障错误:n*m是n行m列,硬是做成了m行n列 T2智障错误:读入三个数写了两个%d T3智障错误:数值相同不代表是同一个数 ...

  2. Python学习笔记（补充）Split 用法

    >>> u = "www.doiido.com.cn" #使用默认分隔符 >>> print u.split() ['www.doiido.co ...

  3. 【BZOJ】1297: [SCOI2009]迷路

    [题意]给定n个点的有向带边权图,求0到n-1长度恰好为T的路径数.n<=10,T<=10^9,边权1<=wi<=9. [算法]矩阵快速幂 [题解]这道题的边权全部为1时,有简 ...

  4. UIDynamicBehavior的行为类翻译

    CHENYILONG Blog UIDynamicBehavior的行为类翻译 © chenyilong. Powered by Postach.io Blog

  5. iOS网络基础---iOS-Apple苹果官方文档翻译

    CHENYILONG Blog iOS网络基础---iOS-Apple苹果官方文档翻译 iOS网络基础 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http: ...

  6. 【leetcode 简单】第三十六题 最小栈

    设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的栈. push(x) -- 将元素 x 推入栈中. pop() -- 删除栈顶的元素. top() -- 获取栈顶元素. ...

  7. Wireshark过滤语句中常用的操作符

    关键字有: eq,== 等于ne,!= 不等于gt,> 比…大lt,< 比…小 ge,>= 大于等于le,<= 小于等于 and,|| 且 or,&& 或 no ...

  8. 删除none的images

    脚本 #!/bin/bash docker ps -a | grep "Exited" | awk '{print $1 }'|xargs docker stop docker p ...

  9. 网络抓包wireshark(转)

    下载地址:https://www.wireshark.org/download/win64/   抓包应该是每个技术人员掌握的基础知识,无论是技术支持运维人员或者是研发,多少都会遇到要抓包的情况,用过 ...

  10. 技巧之如何快速使用websocket来监控标准输出

    为啥是Websocket 服务端可以主动推送消息到浏览器端.比如服务端实时在打印日志,这是一个标准输出,可以实时将日志推送到浏览器. 为啥用websocketd (https://github.com ...