對於剛剛學習網頁前台設計的同學一定對圖片的處理非常苦惱，那么這里簡單的講解一下幾個圖片處理的實例。
以.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呢，更能准確的把握圖片放大的像素等，對頁面的控制更方便。
歡迎各位針對技術上的問題共同交流，敬請留言。