对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼，那么这里简单的讲解一下几个图片处理的实例。

以.net为平台，微软的Visual Studio 2013为开发工具，当然前台技术还是采用CSS3和HTML，Java的小伙伴不要绕道~~~

言归正传，那么我们首先要完成什么样的图片处理呢？

一、CSS3图片的放大

css3中，有一个属性transform，官方的解释是：允许向元素应用2D或3D的转换。这些转换当然就包含旋转、缩放、移动或倾斜了。有兴趣的同学可以继续了解http://www.w3school.com.cn/cssref/pr_transform.asp

transform属性中的方法有很多，那么用于图片缩放的是：scale。多说无益，直接上代码：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

     <div class="content">

         <img src="img/5.jpg" class="pic"/>

     </div>

 </body>

 </html>

上面这段代码是基本的页面结构，body下div，内部放入图片(5.jpg是我测试用的图片，并且放在了img路径下)。之后我们给它添加基本的css样式：

 <style type="text/css">

         *{

             padding:;

             margin:;/*去内外边界*/

         }

         .content {

             margin: 40px auto;/*居中显示*/

             width: 450px;

             height: 301px;

             border:10px solid #808080;/*给外部加一个边框*/

         }

         .content img {

             width: 450px;

             height: 301px;

         }

 </style>

添加完样式之后，界面看起来比较顺眼了，那么现在就开始利用上面提到的属性来完成我们标题提到的功能。

我们先用css来完成。既然提到鼠标悬浮，那么首先想到的应该是伪类：hover。(css中有很多伪类，有兴趣的伙伴可以之后查看)

添加如下的css代码：

         .content img:hover{

             transform:scale(1.2);

         }

现在在页面浏览时，将鼠标放到图片上，就会出现图片放大的效果，当然这里是放大了原图片的1.2倍。等等，有的小伙伴会问，为什么我的图片没有放大呢？天呐，你用的浏览器是不是IE8啊？哈哈，柯南还没有说完。现在市面上主流的浏览器有很多，如：IE，Chrome，Safari，Opera和Firefox，CSS3为了分别适应他们，分别添加了前缀，那么上面的一段代码就要替换成：

         .content img:hover {

             transform: scale(1.2);

             -webkit-transform: scale(1.2); /*Safari 和 Chrome*/

             -moz-transform: scale(1.2); /*Firefox*/

             -ms-transform: scale(1.2); /*IE9*/

             -o-transform: scale(1.2); /*Opera*/

         }

这里在说说scale的其他用法，单单只有scale默认是2D转换的，想要3D转换呢，换成scale3d即可，用法一样。

官方的定义是scale(X,Y)，意思是X轴和Y轴分别缩放的倍数，上面的例子是缩写的形式。

代码写到这里基本已经完成了标题所表示的功能，但是细心的同学会觉得，这样的效果显得过于突然，图片弹出的比较突兀，那么怎么让变化不那么突然呢？CSS3为我们提供了另外一个函数：transition-duration，默认的单位是秒并且允许小数。它的定义是过度效果需要花费的时间。喜欢专研的小伙伴可以参考http://www.w3school.com.cn/css3/css3_transition.asp

那么添加上之后，代码如下：

          .content img {

              width: 450px;

              height: 301px;

              transition-duration:0.5s; /*过度的时间为0，5秒*/

          }

在页面浏览的时候，图片变大就不显得那么突兀和突然，并且动画效果更人性化。

最后我们再考虑一种情况，如果一个页面很复杂，要表达的信息非常多，按照上面的代码显示就会无意的遮挡住其他的图片或者文字，所以这个地方，需要继续优化一下，让图片放大，但是图片的边界不放大，防止页面中不必要的遮挡。这里用到一个重要的属性：overflow。最后将完整的外码列出如下：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>中心点逐渐放大效果</title>

     <style type="text/css">

         *{

             padding:0;

             margin:0;

         }

         .content {

             margin: 40px auto;

             width: 450px;

             height: 301px;

             border:10px solid #808080;

             overflow:hidden;

             z-index:2;

         }

         .content img {

             width: 450px;

             height: 301px;

             transition-duration:0.5s;

             z-index:1;

         }

         .content img:hover {

             transform: scale(1.2);

             -webkit-transform: scale(1.2); /*Safari 和 Chrome*/

             -moz-transform: scale(1.2); /*Firefox*/

             -ms-transform: scale(1.2); /*IE9*/

             -o-transform: scale(1.2); /*Opera*/

         }

     </style>

 </head>

 <body>

     <div class="content">

         <img src="img/5.jpg" class="pic"/>

     </div>

 </body>

 </html>

到这里就将CSS实现鼠标悬浮图片放大的效果了。

二、JQuery图片的放大

利用JQuery实现图片从中心向四周放大的效果的基本思路是：当鼠标悬停时，图片的高度和宽度更增加一定的像素，然后利用相对定位和绝对定位将图片控制向外扩散对应像素大小，最后利用animate属性实现动画效果即可。

jQuery animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);params参数定义形成动画的CSS属性并且它是必须的。speed参数规定效果的时长，它是后面的这个属性都是可选的，可以取以下值："slow"、"fast" 或毫秒。callback 参数是动画完成后所执行的函数名称。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>中心点逐渐放大效果</title>

     <style type="text/css">

         * {

             padding: 0;

             margin: 0;

         }

         .content {

             margin: 40px auto;

             width: 450px;

             height: 301px;

             position: relative;

             z-index: 1000;

             overflow: hidden;

             border: 10px solid #808080;

         }

         .content img {

             position: absolute;

             width: 450px;

             height: 301px;

             top: 0;

             left: 0;

             cursor: pointer;

             z-index: 100;

         }

     </style>

     <script src="js/jquery-1.8.2.min.js"></script>

     <script type="text/javascript">

         $(function () {

             var w = $(".pic").width();

             var h = $(".pic").height();

             var w2 = w + 20;

             var h2 = h + 20;

             $(".pic").hover(function () {

                 $(this).stop().animate({ height: h2, width: w2, left: "-10px", top: "-10px" }, 400);

             }, function () {

                 $(this).stop().animate({ height: h, width: w, left: "0px", top: "0px" }, 400);

             });

         });

     </script>

 </head>

 <body>

     <div class="content">

         <img src="img/5.jpg" class="pic" />

     </div>

 </body>

 </html>

以上代码就完成了同样的效果。

这里重点提一下：stop()的作用。因为图片变大都是有执行时间的，所以在用户快速的将鼠标不断的移入和移出时，会照成图片将所有的移入和移出的执行时间都执行完之后，图片才会停下来，这就给用户体验带来不好的影响。添加stop()之后，鼠标再次移入之前，会将上一次为执行完的时间立即执行掉，不会影响下一次鼠标移入地动画展示效果。

综合以上两种方法，个人觉得各有优缺点，CSS3为我们封装好了，使用起来了方便，代码量很少。jQuery呢，更能准确的把握图片放大的像素等，对页面的控制更方便。

欢迎各位针对技术上的问题共同交流，敬请留言。

浅谈CSS和JQuery实现鼠标悬浮图片放大效果的更多相关文章

  1. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  2. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. 头条PC端的鼠标经过图片放大效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  5. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  6. 转：浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  7. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  8. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  9. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

随机推荐

  1. 深层揭密extern "C"

    一. extern "C" 包含双重含义,从字面上即可得到:首先,被它修饰的目标是“extern”的:其次,被它修饰的目标是“C”的.让我们来详细解读这两重含义. (1) 被ext ...

  2. AT91RM9200---定时器简介

    1.前言 系统定时器模块集成了3个不同的定时器 一个周期性间隔的定时器,用来为操作系统设置时基 一个看门狗定时器,可用于软件死锁时进行系统复位 一个实时时钟计数器用来记录流逝的时间 系统定时器时钟 这 ...

  3. nagios系列(三)之nagios被动监控模式之添加系统负载load、swap、磁盘iostat及memory内存监控详解

    环境: nagios server:192.168.8.42 host_name:node4.chinasoft.com nagios client:192.168.8.41 host_name:no ...

  4. sklearn调参（验证曲线，可视化不同参数下交叉验证得分）

     一 . 原始方法: 思路: 1. 参数从 0+∞ 的一个 区间 取点, 方法如: np.logspace(-10, 0, 10) , np.logspace(-6, -1, 5) 2. 循环调用cr ...

  5. Ext.util.Format.date与Ext.Date.format区别, 转换时间戳

    在Extjs中装时间戳使用如下两种都可以: Ext.util.Format.date(time,'U'); Ext.Date.format(time, 'U'); 为了找到它们的区别,查看源代码,以E ...

  6. js的闭包的一个示例说明

    js中 某个函数的内部函数在该函数执行结束后仍然可以访问这个函数中定义的变量,这称为闭包(Closure) 复制代码 代码如下: function outside() { var myVar = 1; ...

  7. 如何将Request对象中的参数列表打印出来

    Map<String, String[]> map = request.getParameterMap(); Set<Map.Entry<String, String[]> ...

  8. PHP实现简单倒计时

    PHP实现倒计时代码示例如下: <?php $time1 = time(); $time2 = strtotime("2018-10-1"); $time3 = strtot ...

  9. poj12482 扫描线+lazy-tag

    采用扫描线的思想,其实是区间更新的题目 题解链接https://blog.csdn.net/shiqi_614/article/details/7819232 注意处理细节:1)因为边框上的点不算,所 ...

  10. 性能测试二十六：环境部署之Mysql+Redis+Tomcat环境整合

    系统中使用了缓存+数据库,通用读取数据规则1.先从缓存读数据,如果有,直接返回数据:2.如果没有,去数据库中读,然后再插入到缓存中,再返回数据 Mysql+Redis+Tomcat环境整合 1.修改P ...