前言

突然想起来之前看到拉钩网上的hot_info（不知道该叫什么，但是拉钩网上这个div的class是hot_info），感觉实现起来还是比较轻松简单的，效果也不错，于是简单模仿了一下。就不截图了，有兴趣的可以去拉钩网看看效果。模仿的效果可以点这里。

技术

主要是用了jQuery。动画部分是animate()来实现的。

判断进入div的方向

首先用jQuery的offset()方法获得元素相对于页面的坐标；然后用event对象的pageX和pageY属性，这是鼠标进入元素的相对于页面的坐标。要注意的是这两个坐标的值都是浮点型（当然也有直接进入div内部的情况，鼠标滚轮啊之类的），显然只能比较距离，判断距离最近的就是进入的方向。

  1. function judgeD(item, event) {
  2. 			//判斷方向
  3. 			var $this = $(item);
  4. 			var outx =  event.pageX;
  5. 			var outy = event.pageY;
  6. 			var offset = $this.offset();
  7. 			var itemx = offset.left;
  8. 			var itemy = offset.top;
  9. 			var width = parseInt($this.css('width'));
  10. 			var height = parseInt($this.css('height'));
  11. 			var min = {
  12. 				d: 'left',
  13. 				val: Math.abs(outx - itemx)
  14. 			}
  15. 			var tempVal = Math.abs(outy - itemy);
  16. 			if (tempVal < min.val) {
  17. 				min.d = 'top';
  18. 				min.val = tempVal;
  19. 			}
  20. 			var tempVal = Math.abs(outx - width - itemx);
  21. 			if (tempVal < min.val) {
  22. 				min.d = 'right';
  23. 				min.val = tempVal;
  24. 			}
  25. 			var tempVal = Math.abs(outy - height - itemy);
  26. 			if (tempVal < min.val) {
  27. 				min.d = 'bottom';
  28. 				min.val = tempVal;
  29. 			}
  30. 			return min.d;
  31. 		};

动画

动画就不多说了。。，这个方法有些太长了。其中的flag是为了在快速移出移入的时候不闪烁，并且更自然一些。

  1. function move($target, d, f, flag) {
  2. 			$target.show().stop(true);
  3. 			if (!flag) {
  4. 				switch(f) {
  5. 					case 'left':
  6. 						$target.css({
  7. 							top: 0,
  8. 							left: '-100%'
  9. 						});
  10. 						break;
  11. 					case 'right':
  12. 						$target.css({
  13. 							top: 0,
  14. 							left: '200%'
  15. 						});
  16. 						break;
  17. 					case 'top':
  18. 						$target.css({
  19. 							top: '-100%',
  20. 							left: 0
  21. 						});
  22. 						break;
  23. 					case 'bottom':
  24. 						$target.css({
  25. 							top: '200%',
  26. 							left: 0
  27. 						});
  28. 						break;
  29. 					case 'center':
  30. 						$target.css({
  31. 							top: 0,
  32. 							left: 0
  33. 						});
  34. 						break;
  35. 				}
  36. 			}
  37. 			var easing = 'swing';
  38. 			switch(d) {
  39. 				case 'left':
  40. 					$target.animate({
  41. 						top: 0,
  42. 						left: '-100%'
  43. 					}, {
  44. 						speed: 500,
  45. 						easing: easing,
  46. 					});
  47. 					break;
  48. 				case 'right':
  49. 					$target.animate({
  50. 						top: 0,
  51. 						left: '200%'
  52. 					}, {
  53. 						speed: 500,
  54. 						easing: easing,
  55. 					});
  56. 					break;
  57. 				case 'top':
  58. 					$target.animate({
  59. 						top: '-100%',
  60. 						left: 0
  61. 					}, {
  62. 						speed: 500,
  63. 						easing: easing,
  64. 					});
  65. 					break;
  66. 				case 'bottom':
  67. 					$target.animate({
  68. 						top: '200%',
  69. 						left: 0
  70. 					}, {
  71. 						speed: 500,
  72. 						easing: easing,
  73. 					});
  74. 					break;
  75. 				case 'center':
  76. 					$target.animate({
  77. 						top: 0,
  78. 						left: 0
  79. 					}, {
  80. 						speed: 500,
  81. 						easing: easing,
  82. 					});
  83. 					break;
  84. 			}
  85. 		}

绑定事件

  1. $(function() {
  2. 			$('.test_item').hover(function(event) {
  3. 				var d = judgeD(this, event);
  4. 				var $target = $(this).find('.test_inner');
  5. 				move($target, 'center', d);
  6. 			}, function(event) {
  7. 				var d = judgeD(this, event);
  8. 				var $target = $(this).find('.test_inner');
  9. 				move($target, d, 'center', true);
  10. 			});
  11. 		});

css

  1. html, body {
  2. 	width: 100%;
  3. 	height: 100%;
  4. }
  6. .test_item {
  7. 	width: 30%;
  8. 	height: 30%;
  9. 	overflow: hidden;
  10. 	background: #333;
  11. 	position: relative;
  12. 	float: left;
  13. 	margin: 15px;
  14. }
  16. .test_item .test_inner {
  17. 	width: 100%;
  18. 	height: 100%;
  19. 	top: 100%;
  20. 	left: 100%;
  21. 	background: #1fa67a;
  22. 	position: absolute;
  23. }

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<link rel="stylesheet" href="css/test.css">
  7. </head>
  8. <body>
  9.     <!-- Emmet -->
  10. 	(.test_item>.test_inner)*12
  11. 	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
  12. </body>
  13. </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. AngularJs附件上传下载

    首先:angular-file-upload 是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传. 第一步: ...

  2. NOIP 2015 提高组 Day1

    期望得分:100+100+100=300 实际得分:100+100+45=245 T3 相似的代码 复制过去 没有改全,痛失55分 http://www.cogs.pro/cogs/page/page ...

  3. K-means的缺点（优化不仅仅是最小化误差）

    K-means的缺点(优化不仅仅是最小化误差) #转载时,请注明英文原作David Robinson,译者Ding Chao.# 我最近遇到一个交叉验证的问题,我认为这个给我提供了一个很好的机会去用“ ...

  4. 数据库 插入时 碰到NULL报错判断的一种方法（技巧）

    //public static object ToDBNull(object value) 判断插入数据的时候个别参数不能为空的时候做的判断方法 //{ // if (value == null) / ...

  5. 【BZOJ】2406 矩阵

    [算法]二分+有源汇上下界可行流 [题解]上下界 题解参考:[BZOJ2406]矩阵(二分+有源汇有上下界的可行流) #include<cstdio> #include<algori ...

  6. python学习笔记（十三）之lambda表达式

    lambda表达式: 用法 lambda x : 2 * x + 1 其中:前面是参数,后面是返回值. >>> def ds(x): ... return 2 * x + 1 ... ...

  7. void指针和NULL指针

    Void指针和NULL指针 Void指针: Void指针我们称之为通用指针,就是可以指向任意类型的数据.也就是说,任何类型的指针都可以赋值给Void指针. 举例: #include<stdio. ...

  8. jQuery 页面加载初始化

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  9. Metasploit 使用基础

    本文将简单介绍一下Kali2 上Metasploit的一些基本使用,包括启动.更新及一个小问题"Module database cache not built yet, using slow ...

  10. Verilog笔记.1.基本语法

    0.前 抽象模型分级: • 系统级(system):用高级语言结构实现设计模块的外部性能的模型.• 算法级(algorithm):用高级语言结构实现设计算法的模型.• RTL级(Register Tr ...