DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 基於JQuery實現的圖片自動進行縮放和裁剪處理
基於JQuery實現的圖片自動進行縮放和裁剪處理
編輯:JavaScript綜合知識     

 頁面加載後,對不合比例的圖片自動進行縮放和裁剪處理,兼容圖像已在緩存或不在緩存的情況,基於JQuery

其實很早就想寫一個這樣的效果,至於原因?進來這個筆記,我相信你懂的。 一般門戶網站,缺少不了大量的圖片展示,而為了網站美觀,圖片又有各種不同尺寸,專業的網站編輯人員,會把圖片處理成等比例的圖片再上傳,把網站弄得很好看,可惜,我想說,我遇到90%的網站編輯人員都是不專業的。 為了不讓網站編輯人員毀掉我的心血,我決定做這樣一個事情。   1、首先,在CSS裡對圖片定義好大小,如果JS不執行,就能看到拉伸的圖片,也就是最正常的表現; 2、對每個定義圖片大小的CSS多定義一個不常用的容器,這裡我選用了斜體標簽<cite></cite>,並定義其CSS與同根img的CSS一模一樣,並定義該容器裡的img的CSS樣式回歸margin:0;padding:0; 我是這樣做的:    代碼如下: /*公用*/ cite{display:block;overflow:hidden;overflow:hidden !important;}   /*某容器*/ #BigPic img{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;} #BigPic cite{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;} #BigPic cite img{display:block;margin:0px;padding:0px;border:none;}     3、定義圖片處理函數,參考圖片被定義的大小和原始大小,在保持比例的前提下填充滿位置,再裝進裁剪容器; 我的代碼:  代碼如下: //圖片尺寸判斷與處理,用裁剪容器包圍 - By COoL function cutImgz(obj){     var image=new Image();     image.src=obj.src;       $this=$(obj);     var iwidth=$this.width();//獲取在CSS裡固定的圖片顯示寬度     var iheight=$this.height();//獲取在CSS裡固定的圖片顯示高度     if(1*image.width*iheight!=1*iwidth*image.height){         //原始圖片的尺寸與CSS裡固定的圖片尺寸比例不一致,則進行處理         if(image.width/image.height>=iwidth/iheight){             $this.height(iheight+'px');             $this.width((image.width*iheight)/image.height+'px');         }         else{             $this.width(iwidth+'px');             $this.height((image.height*iwidth)/image.width+'px');         }           //用cite裝起來,做出裁剪效果         $this.wrap('<cite />');     } }     4、在加載頁面時遍歷所有圖片,判斷其是否在緩存中,在緩存中則直接進行處理,不在緩存中則通過onload觸發處理; (因為在緩存的圖片秒load,在定義onload事件之前就已經load好,導致onload事件不被觸發;而不在緩存的圖片,若直接處理,圖片未load出來,原始尺寸會被Image對象認為是空圖,width和height都是0) 我的代碼:    代碼如下: $('img').each(function(){     var image=new Image();     image.src=this.src;     if(image.complete){         //存在緩存中,立即處理         cutImgz(this);     } else{         //不存在緩存中,onload處理         this.onload=function(){             cutImgz(this);         }     } });
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved