中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

【顯示預覽】

程序初始化時就會根據(jù)mode來設置_show預覽顯示程序：

this._show = opt.mode !== "filter" ? this._simpleShow : this._filterShow;

除了filter模式，都是使用_simpleShow顯示程序來顯示預覽圖片的。
里面會先調(diào)用_simplePreload方法設置一般預載圖片對象：

var preload = this._preload = new Image(), oThis = this;
preload.onload = function(){ oThis._imgShow( oThis._data, this.width, this.height ); };
preload.onerror = function(){ oThis._error(); };

預載圖片對象保存在_preload屬性中，主要用來判斷圖像能否加載成功并獲取圖片原始尺寸。
要實現(xiàn)這些功能只要用Image對象就足夠了。
在onload中執(zhí)行_imgShow顯示預覽，在onerror中進行出錯處理。
ps：ff、chrome和safari的圖片對象還有naturalHeight和naturalWidth屬性可以獲取圖片的原始尺寸。

然后設置_preload的src預載圖片，如果成功預載就會執(zhí)行_imgShow顯示預覽。
要注意src的設置要在onload/onerror的設置之后，否則設置之前就加載完成的話就觸發(fā)不了事件了。

_imgShow需要三個參數(shù)，包括要預覽圖片的src值，圖片原始寬度和圖片原始高度。
在_imgShow里面首先設置預覽圖片的尺寸：

var img = this.img, style = img.style,
    ratio = Math.max( 0, this.ratio ) || Math.min( 1,
            Math.max( 0, this.maxWidth ) / width  || 1,
            Math.max( 0, this.maxHeight ) / height || 1
        );
   
style.width = Math.round( width * ratio ) + "px";
style.height = Math.round( height * ratio ) + "px";

這里的關鍵是獲取ratio比例值，如果自定義的ratio大于0就直接使用自定義的比例，否則就根據(jù)參數(shù)自動計算。
自動計算首先要確保maxWidth最大寬度和maxHeight最大高度大于等于0。
然后分別跟原始寬高做“/”運算得到比例，如果比例為0表示不限制，那么比例就自動改為1。
最后取比較小的比例來計算，程序設定了比例最大值為1，這樣就不會自動放大圖片了。
當然比例的計算可以根據(jù)需要自行修改。
ps：style的優(yōu)先級比屬性(width/height)高，所以要用style設置。

最后設置img的src就實現(xiàn)預覽了。

出處：藍色理想
責任編輯：bluehearts

上一頁 JavaScript 圖片預覽效果 [3] 下一頁 JavaScript 圖片預覽效果 [5]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。