加入收藏 | 最新开课 | 最新资讯
  • 泉州浮桥企业公司办公文
  • 泉州鲤城浮桥金龙街道、
  • 泉州鲤城浮桥、中山公园
  • 泉州浮桥电脑设计培训中
  • 2018高考完了我要学电脑设
  • 泉州鲤城photoshop淘宝详情
  • 平面广告包装ps/cad/cd-201
  • 福建百科教育泉州专业a
  • 泉州浮桥金龙AUTOCAD机械零
  • Win10开机密码忘了?教你破
  • 泉州电脑设计培训班欢迎您来学习!
    泉州电脑培训班 > 在线学习 > CSS样式学习 >
    全部课程 专业课程 精品课程 软件课程 职业认证 学历教育 全部课程大集结

    网页设计中的CSS和JQuery实现鼠标悬浮图片放大效果-泉州网页设计培训班

    时间:2018-03-15 23:09   来源:泉州培训班   作者:李老师15905099719   点击: 次 (责任编辑:admin)
    网页设计中的CSS和JQuery实现鼠标悬浮图片放大效果-泉州网页设计培训班

    网页设计中的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呢,更能准确的把握图片放大的像素等,对页面的控制更方便。

    上一篇:网页设计中CSS3的display属性的Flex布局-泉州网页设计培训班
    下一篇:网页设计中的CSS滤镜学习,泉州浮桥网页设计培训班