web前端经典教程之放大出现

在网页当中要突出一些品牌、一些旗舰店或者一些业务时，除了给他本身添加效果外，还有给他的说明文字或者详细内容做一些动画效果，也能起到突出或强调的作用。我们今天要讲鼠标滑过放大内容的效果，别看名字再简单不过，但是这样的效果却在各大电商平台、教育网站、企业官网，都有被广泛的使用。下面我用下面几个有点类似但各自又有所不同的案例来讲解吧！

《css定位实现版》

1. 效果如下图所示，当鼠标滑过品牌后，隐藏的对应颜色块的文案逐渐放大出现。由于gif动画是录制的，有失帧的现象，看起来不够细腻，具体效果可以看下方视频教程，因为有的地方不用这交互，所以就使用到了定位来布局。

2. 用到的素材图片就是下面两张了，直接把默认品牌的图片跟背景合在一起，这样的处理方式相对来说减轻了不少操作。然后只要把合成的CSS Sprites精灵图通过背景定位的方式放置到对应的位置。

3. 下面的数据就是对各个盒子位置的定位以及该背景盒子该盛放哪张图片的定位，一般来说，图片进行整合了，css样式就要多写一些，对整张图片进行拆分后才能把相应板块重构。

《JQ浮动实现版》

1. 跟第一个案例处理方式不一样的主要有两处，一是布局方式，二是用到了jquery的一些知识。其中这个放大的比例要超过100%了，用css的hover来做的话，容易出现下方视频教程里所说的那种bug，这是由于滑入和滑出的区域有交集的缘故。

2. 这个效果右侧的品牌图片是一一切出来的，如下所示。每个品牌不一样，但是滑过后放大出现的图片是一样的。

3. 用下面代码的每个

……

结构就可以完成效果图单个品牌盒子的布局了，图片名称分别和上方图片所对应。

《css浮动实现版》

1. 每个品牌的盒子的位置就是用常规的浮动实现的，当然每个盒子上出现的内容还是得用定位来实现，这种已经超出了块级元素和内联元素正常的排列方式了。

2. 切出来的图片素材如下，基本上是一张蓝色图片对应着一张白色透明图片。

3. 代码结构如下所示。当然大学名称尚未改成一致。

附高清实操视频