1. 程式人生 > >基於layer的圖片彈出展示,預設原大小展示。圖片太大則等比例縮小。

基於layer的圖片彈出展示,預設原大小展示。圖片太大則等比例縮小。

程式碼如下,需要展示時呼叫previewImg方法就好了:

/***
 * 圖片彈出展示,預設原大小展示。圖片大於瀏覽器時下視窗可視區域時,進行等比例縮小。
 * config.src 圖片路徑。必須項
 * default_config.height 圖片顯示高度,預設原大小展示。圖片大於瀏覽器時下視窗可視區域時,進行等比例縮小。
 * default_config.width 圖片顯示寬度,預設原大小展示。圖片大於瀏覽器時下視窗可視區域時,進行等比例縮小。
 * default_config.title 彈出框標題
 */
function previewImg(config) {
	if(!config.src || config.src==""){
		layer.msg("沒有發現圖片!");
		return ;
	}
	var default_config = {title: "圖片預覽"};
	var img = new Image();  
    img.onload = function() {//避免圖片還未載入完成無法獲取到圖片的大小。
    	//避免圖片太大,導致彈出展示超出了網頁顯示訪問,所以圖片大於瀏覽器時下視窗可視區域時,進行等比例縮小。
    	var max_height = $(window).height() - 100;
    	var max_width = $(window).width();
    	//rate1,rate2,rate3 三個比例中取最小的。
    	var rate1 = max_height/img.height;
    	var rate2 = max_width/img.width;
    	var rate3 = 1;
    	var rate = Math.min(rate1,rate2,rate3); 
    	//等比例縮放
    	default_config.height = img.height * rate; //獲取圖片高度
        default_config.width = img.width  * rate; //獲取圖片寬度
        
        $.extend( default_config, config);
        var imgHtml = "<img src='" + default_config.src + "' width='"+default_config.width+"px' height='"+default_config.height+"px'/>";  
        //彈出層
        layer.open({  
            type: 1,  
            shade: 0.8,
            offset: 'auto',
            area: [default_config.width + 'px',default_config.height + 50 +'px'], ////寬,高
            shadeClose:true,
            scrollbar: false,
            title: default_config.title, //不顯示標題  
            content: imgHtml, //捕獲的元素,注意:最好該指定的元素要存放在body最外層,否則可能被其它的相對元素所影響  
            cancel: function () {  
                //layer.msg('捕獲就是從頁面已經存在的元素上,包裹layer的結構', { time: 5000, icon: 6 });  
            }  
        }); 
    }
    img.src = config.src;
}