盒子穿透效果

（本文档由教研部贡老师提供）

实现代码见本帖末尾

更多学习资源请关注微信公众号“黑马程序员武汉中心”

最终实现效果如下：

效果描述：当鼠标从图片的任何位置移入时，蓝色透明层会浮动进来，当鼠标送一个图片到另外一个图片进入时，会有一种穿透效果。

1.在做一个效果之前，我们需要先分析网页的结构，也就是我们的盒子模型。在我们开始写代码之前可以先用画笔画一下网页的结构，如下图：

2.分析清楚了结构以后，就可以开始写代码了，打开Dreamweaver，创建好项目目录结构，图片文件夹，index.html首页，css样式文件和JS文件，如下图所示：

3.创建项目结构以后开始写代码，首先清除浏览器默认样式，index.css样式文件中直接添加清除样式代码,这里我们直接使用*号通配符清除所有样式默认样式，代码如下：

  *{margin:0; padding:0;}

4.接下来在index.html的body标签中添加一个div大盒子来实现居中效果，然后让这个大盒子居中显示，结构代码如下：

<divclass="box">     </div>

样式代码如下：
.box{width:910px; margin:100px auto; overflow:hidden;padding:10px; border:1px solid #F00;}

添加完成上述代码后，最外层盒子就显示出来了，如下图所示：

5.接下来添加盒子里面的内容，是ul下面的图片列表，并且还有一个隐藏的div：

效果图如下：

添加样式代码如下所示：

添加完成上述代码后，如下图所示：

6.接下来，我们实现JS鼠标滑动的效果，首先需要引入JQuery库文件并引入两个实现鼠标跟随穿透的JS库文件，引入代码如下所示：

7.接下来添加JS代码，来控制页面中的li标签，其代码如图所示：

运行后的效果如下图所示：

因为本案例是JS动画效果，所以截图看不出来，请运行代码，鼠标移动上去查看。

8.通过本案例，大家可以如下技能：

１.学会使用第三方JS库

２.学会动画穿透效果的实现方法

谢谢分享~

很详细，谢谢老师

感谢分享