浅谈CSS和JQuery实现⿏标悬浮图⽚放⼤效果对于刚刚学习⽹页前台设计的同学⼀定对图⽚的处理⾮常苦恼，那么这⾥简单的讲解⼀下⼏个图⽚处理的实例。
以为平台，微软的Visual Studio 2013为开发⼯具，当然前台技术还是采⽤CSS3和HTML，Java的⼩伙伴不要绕道~~~
⾔归正传，那么我们⾸先要完成什么样的图⽚处理呢？
⼀、CSS3图⽚的放⼤
transform属性中的⽅法有很多，那么⽤于图⽚缩放的是：scale。多说⽆益，直接上代码：
1<!DOCTYPE html>
2<html xmlns="/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*/
jquery在线图片6 -o-transform: scale(1.2); /*Opera*/
7 }
这⾥在说说scale的其他⽤法，单单只有scale默认是2D转换的，想要3D转换呢，换成scale3d即可，⽤法⼀样。
官⽅的定义是scale(X,Y)，意思是X轴和Y轴分别缩放的倍数，上⾯的例⼦是缩写的形式。
那么添加上之后，代码如下：
1 .content img {
2 width: 450px;
3 height: 301px;
4 transition-duration:0.5s; /*过度的时间为0，5秒*/
5 }
在页⾯浏览的时候，图⽚变⼤就不显得那么突兀和突然，并且动画效果更⼈性化。
最后我们再考虑⼀种情况，如果⼀个页⾯很复杂，要表达的信息⾮常多，按照上⾯的代码显⽰就会⽆意的遮挡住其他的图⽚或者⽂字，所以这个地⽅，需要继续优化⼀下，让图⽚放⼤，但是图⽚的边界不放⼤，防⽌页⾯中不必要的遮挡。这⾥⽤到⼀个重要的属性：overflow。最后将完整的外码列出如下：
1<!DOCTYPE html>
2<html xmlns="/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="/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 () {
33var w = $(".pic").width();
34var h = $(".pic").height();
35var w2 = w + 20;
36var 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呢，更能准确的把握图⽚放⼤的像素等，对页⾯的控制更⽅便。
欢迎各位针对技术上的问题共同交流，敬请留⾔。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论