浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼，那么这里简单的讲解一下几个图片处理的实例。
以.net为平台，微软的Visual Studio 2013为开发工具，当然前台技术还是采用CSS3和HTML，Java的小伙伴不要绕道~~~
言归正传，那么我们首先要完成什么样的图片处理呢？
一、CSS3图片的放大
css3中，有一个属性transform，官方的解释是：允许向元素应用2D或3D的转换。这些转换当然就包含旋转、缩放、移动或倾斜了。有兴趣的同学可以继续了解http://www.w3school.com.cn/cssref/pr_transform.asp
transform属性中的方法有很多，那么用于图片缩放的是：scale。多说无益，直接上代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <div class="content"> 9 <img src="img/5.jpg" class="pic"/> 10 </div> 11 </body> 12 </html>
上面这段代码是基本的页面结构，body下div，内部放入图片(5.jpg是我测试用的图片，并且放在了img路径下)。之后我们给它添加基本的css样式：
1 <style type="text/css"> 2 *{ 3 padding:0; 4 margin:0;/*去内外边界*/ 5 } 6 .content { 7 margin: 40px auto;/*居中显示*/ 8 width: 450px; 9 height: 301px; 10 border:10px solid #808080;/*给外部加一个边框*/ 11 } 12 .content img { 13 width: 450px; 14 height: 301px; 15 } 16 </style>
添加完样式之后，界面看起来比较顺眼了，那么现在就开始利用上面提到的属性来完成我们标题提到的功能。
我们先用css来完成。既然提到鼠标悬浮，那么首先想到的应该是伪类：hover。(css中有很多伪类，有兴趣的伙伴可以之后查看)
添加如下的css代码：
1 .content img:hover{ 2 transform:scale(1.2); 3 }
现在在页面浏览时，将鼠标放到图片上，就会出现图片放大的效果，当然这里是放大了原图片的1.2倍。等等，有的小伙伴会问，为什么我的图片没有放大呢？天呐，你用的浏览器是不是IE8啊？哈哈，柯南还没有说完。现在市面上主流的浏览器有很多，如：IE，Chrome，Safari，Opera和Firefox，CSS3为了分别适应他们，分别添加了前缀，那么上面的一段代码就要替换成：
1 .content img:hover { 2 transform: scale(1.2); 3 -webkit-transform: scale(1.2); /*Safari 和 Chrome*/ 4 -moz-transform: scale(1.2); /*Firefox*/ 5 -ms-transform: scale(1.2); /*IE9*/ 6 -o-transform: scale(1.2); /*Opera*/ 7 }
这里在说说scale的其他用法，单单只有scale默认是2D转换的，想要3D转换呢，换成scale3d即可，用法一样。
官方的定义是scale(X,Y)，意思是X轴和Y轴分别缩放的倍数，上面的例子是缩写的形式。
代码写到这里基本已经完成了标题所表示的功能，但是细心的同学会觉得，这样的效果显得过于突然，图片弹出的比较突兀，那么怎么让变化不那么突然呢？CSS3为我们提供了另外一个函数：transition-duration，默认的单位是秒并且允许小数。它的定义是过度效果需要花费的时间。喜欢专研的小伙伴可以参考http://www.w3school.com.cn/css3/css3_transition.asp
那么添加上之后，代码如下：
1 .content img { 2 width: 450px; 3 height: 301px; 4 transition-duration:0.5s; /*过度的时间为0，5秒*/ 5 }
在页面浏览的时候，图片变大就不显得那么突兀和突然，并且动画效果更人性化。
最后我们再考虑一种情况，如果一个页面很复杂，要表达的信息非常多，按照上面的代码显示就会无意的遮挡住其他的图片或者文字，所以这个地方，需要继续优化一下，让图片放大，但是图片的边界不放大，防止页面中不必要的遮挡。这里用到一个重要的属性：overflow。最后将完整的外码列出如下：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>中心点逐渐放大效果</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 .content { 12 margin: 40px auto; 13 width: 450px; 14 height: 301px; 15 border:10px solid #808080; 16 overflow:hidden; 17 z-index:2; 18 } 19 .content img { 20 width: 450px; 21 height: 301px; 22 transition-duration:0.5s; 23 z-index:1; 24 } 25 .content img:hover { 26 transform: scale(1.2); 27 -webkit-transform: scale(1.2); /*Safari 和 Chrome*/ 28 -moz-transform: scale(1.2); /*Firefox*/ 29 -ms-transform: scale(1.2); /*IE9*/ 30 -o-transform: scale(1.2); /*Opera*/ 31 } 32 </style> 33 </head> 34 <body> 35 <div class="content"> 36 <img src="img/5.jpg" class="pic"/> 37 </div> 38 </body> 39 </html>
到这里就将CSS实现鼠标悬浮图片放大的效果了。
二、JQuery图片的放大
利用JQuery实现图片从中心向四周放大的效果的基本思路是：当鼠标悬停时，图片的高度和宽度更增加一定的像素，然后利用相对定位和绝对定位将图片控制向外扩散对应像素大小，最后利用animate属性实现动画效果即可。
jQuery animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);params参数定义形成动画的CSS属性并且它是必须的。speed参数规定效果的时长，它是后面的这个属性都是可选的，可以取以下值："slow"、"fast" 或毫秒。callback 参数是动画完成后所执行的函数名称。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>中心点逐渐放大效果</title> 6 <style type="text/css"> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 .content { 12 margin: 40px auto; 13 width: 450px; 14 height: 301px; 15 position: relative; 16 z-index: 1000; 17 overflow: hidden; 18 border: 10px solid #808080; 19 } 20 .content img { 21 position: absolute; 22 width: 450px; 23 height: 301px; 24 top: 0; 25 left: 0; 26 cursor: pointer; 27 z-index: 100; 28 } 29 </style> 30 <script src="js/jquery-1.8.2.min.js"></script> 31 <script type="text/javascript"> 32 $(function () { 33 var w = $(".pic").width(); 34 var h = $(".pic").height(); 35 var w2 = w + 20; 36 var h2 = h + 20; 37 38 $(".pic").hover(function () { 39 $(this).stop().animate({ height: h2, width: w2, left: "-10px", top: "-10px" }, 400); 40 }, function () { 41 $(this).stop().animate({ height: h, width: w, left: "0px", top: "0px" }, 400); 42 }); 43 }); 44 </script> 45 </head> 46 <body> 47 <div class="content"> 48 <img src="img/5.jpg" class="pic" /> 49 </div> 50 </body> 51 </html>
以上代码就完成了同样的效果。
这里重点提一下：stop()的作用。因为图片变大都是有执行时间的，所以在用户快速的将鼠标不断的移入和移出时，会照成图片将所有的移入和移出的执行时间都执行完之后，图片才会停下来，这就给用户体验带来不好的影响。添加stop()之后，鼠标再次移入之前，会将上一次为执行完的时间立即执行掉，不会影响下一次鼠标移入地动画展示效果。
综合以上两种方法，个人觉得各有优缺点，CSS3为我们封装好了，使用起来了方便，代码量很少。jQuery呢，更能准确的把握图片放大的像素等，对页面的控制更方便。
欢迎各位针对技术上的问题共同交流，敬请留言。
