做網站的朋友都想擁有一個漂亮大氣的網站(今天這里織夢模板小編暫時先拋棄代碼優化不談)。當然作為專業的 織夢模板生產商的武林網網站也會十分在意一個網站美化程度。因此織夢模板的所有編輯就成了一個織夢模板優化小組,分批次的和大家介紹織夢模板美化的一系列的教程,該教程都是以織夢模板美化之的標題作為開頭,希望有喜歡的朋友可以留言查看。
今天我們作為織夢模板美化的第一講,主要給大家介紹的是織夢美化中的一個重要的環節,織夢模板的縮略圖問題。織夢系統默認是將縮略圖縮小為小于等于后臺設置的尺寸。但是因為我們發布的原始圖片的尺寸都是不一樣的,如果前臺是固定圖片框顯示,那么一定顯示不好看。圖片會變形。因此,很多站長為了網站美觀,就手動修改。但是想想就知道這是非常浩大的工程,想想就頭疼。那么有什么既方便又實用的辦法呢?當然是有的呢。
武林網給出的優化方案是這樣的:
1、在后臺設置縮略圖尺寸,設置成前臺最大固定框的尺寸。
2、使織夢提取的縮略圖大于等于后臺設置的尺寸,也就是將原圖等比例縮小成不是寬等于設置尺寸就是高等于。
3、編寫JS函數,前臺顯示縮略圖的時候,使圖片總是水平垂直顯示,DIV不被撐開。
這個應該是綜合最優的方案了,而且一次搞定終身受益。下面我就把詳細教程貼出來。
這一步不需要詳細述說了大家都會,下面看第二步。
if($toWH<=$srcWH){$ftoW=$toW;$ftoH=$ftoW*($srcH/$srcW)}else{$ftoH=$toH$ftoW=$ftoH*($srcW/$srcH)}將if與else中的代碼互換。
function ImageShow(maxWidth,maxHeight,objImg){var img=new Image();img.src=objImg.src;var w=img.width;var h=img.height;if(w==maxWidth&&h==maxHeight){objImg.width=maxWidth;objImg.height=maxHeight;return};var b1=w/h;var b2=maxWidth/maxHeight;if(b1>b2){objImg.height=maxHeight;objImg.width=maxHeight/h*w;objImg.style.marginLeft=-(maxHeight*w-maxWidth*h)/(2*h)+'px'}else{objImg.widt=maxWidth;objImg.height=maxWidth/w*h;objImg.style.margnTop=-(maxWidth*h-maxHeight*w)/(2*w)+'px'}; return};然后增加
“voerflow:hidden”
圖片顯示調用上面的JS函數,具體如下:
<img onload="ImageShow(寬,高,this)" src="圖片地址" />
只要這樣四步,就完美搞定縮略圖問題啦。有興趣的朋友可以嘗試看看。
以上就是織夢模板美化教程之織夢縮略圖完美優化的全部內容,希望對大家的學習和解決疑問有所幫助,也希望大家多多支持武林網。新聞熱點
疑難解答