2015-04-17

实现鼠标 hover 元素中心点放大效果

对于之前实现鼠标 hover 元素从隐藏到出现的方法常用的有两种：

1.通过display：none；或者 visibility：hidden；来实现元素的隐藏，而通过设置被 hover 元素 display：block；或者 visibility：visible；来实现元素的重新显示。
2.通过设置宽或者高为 0 来实现元素隐藏，而通过重新设置被 hover 元素的宽高来实现元素的显示。

第一种方式无法实现动态的显示效果，而第二种方式可以实现较美观的动态效果，只需设置 transition：all .3s；即可。

但是，通过实践发现：若要实现从中心平滑放大的效果，第二种方式怎么也做不到那种平滑的效果。

通过第二种方式传统定位实现的，hover图片放大，不是从中心点放大，而是以左上角为起始位置向右下角方向延伸放大，这不是我们想要的效果。

那么，以此为基础作出假设若要实现从中心点的放大是不是只要将被 hover 的元素，居中就行了呢？

然而通过强制修改被 hover 元素的定位，在 hover 中将其设置居中，并不能实现想要的效果，元素依然从左上角向右下角延伸放大，只是在放大的过程的有一个位置的跳跃，跳跃到中间罢了，过渡非常生硬。

那么，如何才能实现鼠标 hover 元素中心点 “平滑” 放大效果呢？

传统的改变宽高的方式是行不通的，这时候需要用到 transform 属性，通过设置 transform: scale(1.2); 来实现中心放大的效果，当然其中的数值可以自己设置。

下面我分别给两个图片设置定位，一个是左上角定位，一个是居中定位（实现效果如下图）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.div_1{
			display: inline-block;
			width: 500px;
			height: 500px;
			border: 1px solid blue;
			position: relative;
		}
		.img1{
			width: 400px;
			height: 320px;
			position: absolute;
			left: 0;
			top: 0;
			transition: all .4s;
			cursor: pointer;
		}
		.img1:hover{
			zoom:1;
			transform: scale(1.2);
		}
		.div_2{
			display: inline-block;
			width: 500px;
			height: 500px;
			border: 1px solid yellow;
			position: relative;
		}
		.img2{
			width: 400px;
			height: 320px;
			position: absolute;
			top: 0;right: 0;bottom: 0;left: 0;
			margin: auto;
			transition: all .4s;
			cursor: pointer;
		}
		.img2:hover{
			zoom:1;
			transform: scale(1.2);
		}
	</style>
</head>
<body>
	<div class="div_1">
		<img class="img1" src="hy.jpg" alt="">
	</div>
	<div class="div_2">
		<img class="img2" src="hy.jpg" alt="">
	</div>
</body>
</html>