當前位置:編程學習大全網 - 源碼下載 - dede首頁縮略圖如何自適應寬和高,200分懸賞

dede首頁縮略圖如何自適應寬和高,200分懸賞

我有三種想法。

第壹種想法,就是妳將頁面顯示的小圖比例弄成壹致。大小可能不壹樣,但比例要壹樣。改壹下模板文件就好,最好是列表頁的模板,這樣並不太影響美觀。因為縮略圖在系統使用時,都是使用的同壹樣圖片,雖然我們使用時大小不壹樣,但比例應該都是壹樣的,不然導致圖片變形。

dede提供了縮略圖默認的大小設置,這個在核心設置=>附件設置裏面的圖片設置。

在發布文章時,縮略圖選項,點選可以進行裁剪,比例就根據上面設置的比例進行裁剪。

第二種想法,如果堅持不動後臺,要麽生成幾種縮略圖,供首頁用的,供列表頁用的,供幻燈用,供其他的使用。但這個工作量比較大,別人的系統,要改很多地方。

第三種想法,用js代碼及CSS代碼來實現,縮略圖根據壹種場合(如幻燈)的大小來設置。在其他場合使用的時候,用js代碼進行兩端裁剪顯示處理。這樣做的話,可能會讓頁面長壹點,速度慢壹點。

第壹種和第二種就不多說了。

我對第三種比較感興趣,搜了全網,沒看到合適的程序,所以根據網上現成的,進行了修改。把下面的代碼放在模板頁面中就可以了。

下面這段js,是全網目前真正做到js圖片不變形任意尺寸縮放的。當然有剪裁,主要取中間部分。

<script>

/** 檢測圖像屬性 */

function CheckProperty(obj) {

var ImgObj=new Image();

ImgObj.src = obj.src;

FileObj=ImgObj;

if(ImgObj.readyState!="complete") //如果圖像是未加載完成進行循環檢測

{

setTimeout("CheckProperty(FileObj)",500);

}

ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得圖片文件的大小

//取得圖片的寬度

ImgWidth=ImgObj.width

//取得圖片的高度

ImgHeight=ImgObj.height;

setCenter(obj)

zoom(obj , ImgWidth , ImgHeight);

}

//設置圖片上層div

function setCenter(obj){

obj.parentNode.style.display = 'block';

obj.parentNode.style.width=obj.width;

obj.parentNode.style.height=obj.height;

obj.parentNode.style.overflow='hidden';

obj.parentNode.style.verticalAlign = 'middle';

obj.parentNode.style.textAlign = 'center';

}

//開始縮放

function zoom(obj , width , height){

var left=0;

var top=0;

Mw=obj.width/width;

Mh=obj.height/height;

if(Mw > Mh) {

//寬度維持,高度變化

old=obj.height;

obj.height=obj.width*height/width;

top=Math.floor((old-obj.height)/2);

} else {

//高度維持,寬度變化

old=obj.width;

obj.width=obj.height*width/height;

left=Math.floor((old-obj.width)/2);

}

//alert(top+' '+left);

//obj.style.margin="-100px 0px 0px 0px";

obj.style.margin=top+'px '+left+'px';

}

//修改結束

</script>

<div><img src='圖片地址' onload='CheckProperty(this)' width="100" height="50"></div>

說明:

每次調用時,都要將<div>....</div>代碼替換模板中<img 。。。>部分的內容。包括<div>標記。<div>中間不要再添加什麽了,需要的話,可以再放在上層<div>中間。

  • 上一篇:有關計算機編程,網絡基礎知識的書籍
  • 下一篇:centos tomcat7 jvm的默認值是多少?
  • copyright 2024編程學習大全網