用js實現(xiàn)層隨著內(nèi)容大小動態(tài)漸變改變推薦

更新時間：2009年12月19日 00:09:05 作者：

以前做谷歌的小工具時，api里提供了一個很有用的函數(shù)，那就是在程序運行時可以使層動態(tài)隨內(nèi)容大小而變化，而且是平滑變換，在一些jquery的lightbox里也普遍有這種效果，看起來很酷的樣子。

下面我們就自己來實現(xiàn)一個這樣的組件，沒有參考其他資料，純屬自己瞎寫。

我覺得我這個方法很簡單了，只需要在外邊多套一個層就可以，而且可以容納大量的文字（為什么這樣說？因為如果只是單純的圖片，那調整起來簡單多了，而如果有一大串文字的話，要變換兩次才可以，因為如果你改變了寬度的話，字會被擠得高度增加，這里有兩個方法來調整，一個是每次動畫循環(huán)都更新最新的高和寬，另一種方法就是先變換，變換完后再檢查一次，這次變化的只是高度，也就是調節(jié)兩次，第一種方法效果好，但是每次都更新，自然加重了負擔，第二種效果差點，但是性能好，而且也不是那么差）

實現(xiàn)原理很簡單，就是在外邊放一個主體層，我們調整的就是這個層，我們首先把這個層設置一個很小的寬和高，然后設置其overflow為hidden，然后運行時判斷里面內(nèi)容的大小，再回來調整外部層的大小即可。
本程序用到了YUI的一個動畫函數(shù)和一個淘寶sns的jsonhtml對象，這個對象的作用是將一個用json形式表示的html轉換成真正的html結構，可以使構造html的程序簡潔清晰。

主體從Tip開始,我將這個組件寫成了單例的模式,也就是不用new就可以在任何地方使用,而且都指向一個對象,而且這個組件封裝目前沒優(yōu)化,為了試驗,里面很多東西都是直接改的,外部暴露的接口太少:

復制代碼代碼如下:

var Tip=function(){ 
//直接返回一個json對象,這是一種js單例模式的實現(xiàn) 
return { 
//初始化函數(shù) 
init:function(options){ 
this.config={ 
container:null,//包裝容器 
style:{},//樣式配置 
data:{} 
} 
//樣式配置 
this.style={tip:null,tip_title:null,tip_pic:null,tip_bd:null} 
//混合配置選項 
mixin(this.config,options) 
//初始數(shù)據(jù) 
this.data={ 
//標題的數(shù)據(jù) 
hd_data:this.config.data.hd_data==null?"沒有描述":this.config.data.hd_data, 
//圖片數(shù)據(jù),正常情況下應該是一個網(wǎng)址 
pic_data:this.config.data.pic_data==null?"#":this.config.data.pic_data, 
//主題內(nèi)容數(shù)據(jù) 
bd_data:this.config.data.bd_data==null?"沒有描述":this.config.data.bd_data 
} 
//這是定義了一個加載的時候顯示的滾動的gif的圖像 
this.loading_pic=new Image(); 
this.loading_pic.src="http://www.sj33.cn/sc/UploadFiles_6888/200803/20080320132838323.gif"; this.creatHtml();//調用html構造器 
}, 

關于為什么js寫成這樣,還有一些從某些庫里學來的寫法就不多解釋了,注釋也很清楚,這里就是初始化一些數(shù)據(jù),用來給后面的程序處理.

復制代碼代碼如下:

/** 
*構造html結構 
*/ 
creatHtml:function(){ 
//從外邊數(shù)第二層的樣式,它包住了里面的所有元素,大小是隨著里面元素大小而變化的 
this.style.tip={ 
backgroundColor:"#fff", 
color:"#fff", 
border:"1px #333 solid", 
padding:"10px", 
overflow:"visible" 
} 
//標題的樣式 
this.style.tip_title={ 
color:"#037DF9", 
fontSize:"14px", 
fontWeight: "bold" 
} 
this.style.tip_pic={ 

} 
//文字內(nèi)容的樣式 
this.style.tip_bd={ 
color:"#333", 
lineHeight:"20px" 
} 
this.style.hr={ 
color:"#037DF9", 
height:"1px", 
border:"0", 
borderTop:"1px #037DF9 solid", 
margin:"10px 0" 
} 
//最外邊包裝層的樣式 
this.style.outer={ 
border:"5px solid #037DF9", 
overflow:"hidden", 
width:"10px", 
height:"10px" 
} 
//混合選項,也就是說這些都可以在外部自己定義樣式,然后覆蓋默認的樣式 
mixin(this.style.tip,this.config.style.tip) 
mixin(this.style.tip_title,this.config.style.tip_title) 
mixin(this.style.tip_pic,this.config.style.tip_pic) 
mixin(this.style.tip_bd,this.config.style.tip_bd) 
//這個json就是html結構,其實不難理解,看看jsonhtml.js的源碼就理解了 
var html_config={ 
div:{id:"tip_outer",style:this.style.outer}, 
">>":[ 
{div:{id:"tip_inner",style:this.style.tip}, 
">>":[ 
{div:{className:"tip-title",style:this.style.tip_title,id:"tip-title"},">>":this.data.hd_data}, 
{hr:{style:this.style.hr}}, 
{div:{className:"tip-pic",style:this.style.tip_pic,id:"tip-pic"},">>":[{img:{src:this.data.pic_data}}]}, 
{hr:{style:this.style.hr}}, 
{div:{className:"tip-bd",style:this.style.tip_bd,id:"tip-bd"},">>":this.data.bd_data} 
]} 
] 

} 
//轉換成真正的html元素 
var html=JsonHtml.compose(html_config) 
//添加到容器中 
var tip_container=this.config.container||document.body; 
tip_container.appendChild(html) 
//下面獲取一些元素,用來后面的操作,例如填充數(shù)據(jù),動畫等 
this.tip_outer=document.getElementById("tip_outer") 
this.tip_inner=document.getElementById("tip_inner") 

this.tip_title=document.getElementById('tip-title') 
this.tip_pic=document.getElementById('tip-pic') 
this.tip_bd=document.getElementById('tip-bd') 
//此時已經(jīng)初始化了,首次調用了此函數(shù),這就是大小自適應的函數(shù) 
this.updateSize(); 
}, 

上面首次出現(xiàn)了updateSize()函數(shù),此函數(shù)就是今天的主體函數(shù),不過遺憾的是這個函數(shù)非常短,

復制代碼代碼如下:

/** 
* 自動調整大小 
*/ 
updateSize:function(size){ 
//這里用了一個很不厚道的hack，那就是在大多數(shù)時候，我在外部就計算好要調整的高度，然后傳進來，而不是在這里調整的 
//當然也可以不傳參數(shù),那樣這里的計算就要麻煩點 
var size=size||{width:null,height:null} 
//獲取里面的tip的大小,后面就把外邊的層的大小變成這個大小 
var _height=size.height||this.tip_inner.offsetHeight; 
var _width=size.width||this.tip_inner.offsetWidth; 
var now_this=this; 
//開始定義動畫 
var ani=new YAHOO.util.Anim(this.tip_outer, {height:{to:_height},width:{to:_width}},0.7) 
//第一次動畫結束后,文字那里通常是不對的,因為字會因為寬度變了,而改變高度,這個是動態(tài)不可預知的,所以這里 
//再檢查一遍 
ani.onComplete.subscribe(function(){ 
var _height=now_this.tip_inner.offsetHeight; 
var _width=now_this.tip_inner.offsetWidth; 
var ani2=new YAHOO.util.Anim(now_this.tip_outer, {height:{to:_height},width:{to:_width}},0.7); 

ani2.animate(); 
}); 
ani.animate(); 
}, 

注釋很詳細,無需多說了,這個對象只剩下一個函數(shù)了,那就是填充數(shù)據(jù),這個函數(shù)可以多次執(zhí)行,每次都會導致數(shù)據(jù)變化和大小的變化

復制代碼代碼如下:

/** 
* 改變填充數(shù)據(jù) 
* @param data 一個json對象,包括三部分的數(shù)據(jù){hd_data:"",pic_data:"",bd_data:""} 
*/ 
updateData:function(data){ 
this.data={ 
hd_data:null?"沒有描述":data.hd_data,//標題的數(shù)據(jù) 
pic_data:null?"#":data.pic_data,//圖片數(shù)據(jù),正常情況下應該是一個網(wǎng)址 
bd_data:null?"沒有描述":data.bd_data//主題內(nèi)容數(shù)據(jù) 
} 
//填充數(shù)據(jù) 
this.tip_title.innerHTML=this.data.hd_data; 
this.tip_bd.innerHTML=this.data.bd_data; 
this.tip_pic.innerHTML="" 
this.tip_pic.appendChild(this.loading_pic) 
var now_this=this; 
//填充圖片 
this.pic=new Image(); 
this.pic.src=this.data.pic_data; 
this.pic.errorpic=new Image(); 
this.pic.errorpic.src="http://www.dbjr.com.cn/logo.gif";//圖片加載錯誤時顯示的圖片 
this.pic.onload=function(){ 
now_this.tip_pic.innerHTML=""; 

now_this.tip_pic.appendChild(this) 
now_this.updateSize({width:this.width+20}); 
} 
this.pic.onerror=function(){ 
now_this.tip_pic.innerHTML=""; 

now_this.tip_pic.appendChild(this.errorpic) 
now_this.updateSize({width:this.errorpic.width+20}); 
} 
this.updateSize(); 
}, 

到這里這個對象就結束了,是不是很簡單,他已經(jīng)很完整了,下面我們就來啟動它,我們設置一些數(shù)據(jù),然后隨機地填充,每次點擊頁面都會填充不同的數(shù)據(jù).

復制代碼代碼如下:

window.onload = function(){ 
AddLink.init({ 
class_name: "content" 
}); 
Tip.init(); 
document.body.onclick=function(){ 
Array.prototype.rand=function(){ 
return this[Math.round(Math.random()*(this.length-1))]; 
} 
var hd_arr=[ 
"我是隨機的你信不信", 
"不信算了,點擊頁面我就會變了", 
"每點一次都會變", 
"也有可能重復的", 
"重復的我可不管餓,因為我是隨機的" 
]; 
var pic_arr=[ 
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-14-20-53-231.png", 
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-15-23-51-45.png", 
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-16-00-25-38.png", 
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-14-23-25-171.png", 
"http://www.beiju123.cn/blog/wp-content/uploads/2009/12/2009-12-14-20-49-362.png", 
"http://dgdgdg.d" 
] 
var bd_arr=[ 
"最近聽人說aptana這個ide不錯,也支持我喜歡的ruby,而且對js和html,css支持也很好,我比較來比較去,還是喜歡netbeans,首先因為netbeans里有個插件,可以把著色的代碼復制粘貼成html+css,而是代碼著色aptana不好看,自己配又配不出感覺來,net串get什么什么的就行了.js已經(jīng)是夠簡潔的語言了,提醒太多反而沒什么意義,不過在netbeans里的YUI提示和我看的YUI不是一個版本的,全是錯的,但是我還是喜歡netbeans多一點,其實編程這東西效率很難說高和低,思路理清楚了,自然效率高.程序寫的很快的話,代碼提示很智能的話,反而太依賴,對思路理解不深刻,寫著后面忘了前面,效率反而慢了", 
"后可以做一些基本的處理,例如加個邊框美化下,可以用畫筆涂一下,這個比較有用,高清圖上有字的背景圖,可以涂掉就可以直接用了.下面說一下其他功能吧, 首先,最重磅的就是”標尺”,可以", 
"代碼復制粘貼成html+css,而是代碼著色aptana不好看,自己配又配不出感覺來,netbeans的界面也比較清爽,至于js提示,其實我從來就沒用到過高級的提示,在netbeans里我只需要他在我輸入document.的時候出來后面那一串get什么什么的就行了.js已經(jīng)是夠簡潔的語言了,提醒太多反而沒什么意義,不過在netbeans里的YUI提示和我看的YUI不是一個版本的,全是錯的,但是我還是喜歡netbeans多一點,其實編程這東西效率很難說高", 
"這里我只拿我的幾個比較寬泛的想法來談自己對top平臺的理解,為自己保留一條秘密,同時也跟大家分享自己的想法.現(xiàn)今社會,很多產(chǎn)業(yè)都已經(jīng)趨向于飽和,例如:超市行業(yè).在南京,蘇果超市占據(jù)了絕對地位.隨處可見其身影,當然也有類似華聯(lián)和家樂福之類的超市經(jīng)提供了上述服務了,但是我們可以通過來提供更多個性服務來增加自己的競爭力.我其實也正在策劃做一個公益性的垂直搜索網(wǎng)站,可能會爭取到政府的資金支持,但是目前我除了我女朋友還沒有跟任何人透露過,如果有人對此感興趣可以找我討論." 
] 
var config={ 
hd_data:hd_arr.rand(), 
pic_data:pic_arr.rand(), 
bd_data:bd_arr.rand() 
} 
Tip.updateData(config); 

} 
} 