Use js to realize the dynamic gradient change of the layer with the content size. Recommended

Next, we will implement such a component by ourselves. We did not refer to other materials and wrote it purely by ourselves.

I think my method is very simple. I only need to add an extra layer outside, and it can accommodate a large amount of text (why do you say this? Because if it is just a simple picture, it is much easier to adjust. , and if there is a large string of text, it needs to be transformed twice, because if you change the width, the words will be squeezed into a height that increases. There are two methods to adjust. One is to update the latest height in each animation cycle. and width. Another method is to transform first, and then check again after the transformation. This time, only the height is changed, that is, adjusted twice. The first method works well, but updating it every time naturally increases the burden. The two effects are almost the same, but the performance is good and not that bad)

The implementation principle is very simple, that is, put a main body layer outside. It is this layer that we adjust. We first set this layer to a small size. The width and height, then set its overflow to hidden, then determine the size of the content inside during runtime, and then come back to adjust the size of the outer layer.
This program uses an animation function of YUI and a jsonhtml object of Taobao sns. The function of this object is to convert an html expressed in json form into a real html structure, which can make the program of constructing html simple and clear.

The main body starts from Tip. I wrote this component in a singleton mode, that is, it can be used anywhere without using new, and it all points to an object. Moreover, the encapsulation of this component is not currently optimized. For the sake of experiment, Many things inside are directly modified, and there are too few externally exposed interfaces:

Copy code The code is as follows:

var Tip=function(){ 
//Return a json object directly, which is an implementation of js singleton mode
return { 
//Initialization function
init:function (options){ 
this.config={ 
container:null,//Packaging container
style:{},//Style configuration
data:{} 
} 
/ /Style configuration
this.style={tip:null,tip_title:null,tip_pic:null,tip_bd:null} 
//Mixed configuration options
mixin(this.config,options) 
/ /Initial data
this.data={ 
//Title data
hd_data:this.config.data.hd_data==null?"No description":this.config.data.hd_data, 
//Picture data, normally it should be a URL
pic_data:this.config.data.pic_data==null?"#":this.config.data.pic_data, 
//Theme content data
bd_data:this.config.data.bd_data==null?"No description":this.config.data.bd_data 
} 
//This defines a scrolling gif that is displayed when loading Image
this.loading_pic=new Image(); 
this.loading_pic.src="http://www.sj33.cn/sc/UploadFiles_6888/200803/20080320132838323.gif"; this.creatHtml(); //Call the html constructor 
}, 

As for why js is written like this, there are some writing methods learned from some libraries that I won’t explain much, and the comments are also very clear, here It is to initialize some data for processing by subsequent programs.

Copy the code The code is as follows:

/**
* Construct html structure 
*/ 
creatHtml:function(){ 
//The style of the second layer from the outside, it wraps all the elements inside, and the size is as 
this.style.tip={ 
backgroundColor:"#fff", 
color:"#fff", 
border:"1px #333 solid", 
padding:"10px", 
overflow:"visible" 
} 
//Title style
this.style.tip_title={ 
color:"#037DF9", 
 fontSize: "14px", 
fontWeight: "bold" 
} 
this.style.tip_pic={ 

} 
//Style of text content 
this.style .tip_bd={ 
color:"#333", 
lineHeight:"20px" 
} 
this.style.hr={ 
color:"#037DF9", 
height :"1px", 
border:"0", 
borderTop:"1px #037DF9 solid", 
margin:"10px 0" 
} 
//The style of the outermost packaging layer 
this.style.outer={ 
border:"5px solid #037DF9", 
overflow:"hidden", 
width:"10px", 
height:"10px" 
} 
//Mixing options, that is to say, these can be defined externally, and then override the default style 
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) 
//This json is the html structure. In fact, it is not difficult to understand. Just look at the source code of jsonhtml.js and you will understand. 
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} 
]} 
] 

} 
//Convert to real html elements
var html=JsonHtml.compose(html_config) 
//Add to container
var tip_container=this.config.container||document.body; 
 tip_container.appendChild(html) 
//Get some elements below for subsequent operations, such as filling data, animation, etc. 
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') 
//It has been initialized at this time, and this function is called for the first time. This is the size adaptive function 
this.updateSize(); 
}, 

The updateSize() function appears for the first time above. This function is today’s main function, but unfortunately this function is very short,

Copy the code The code is as follows:

/**
* Auto-resize 
*/ 
updateSize:function(size){ 
//A is used here A very unkind hack, that is, most of the time, I calculate the height to be adjusted externally, and then pass it in instead of adjusting it here 
 // Of course, you can also not pass the parameters, so that the calculation here It's a bit more troublesome
var size=size||{width:null,height:null} 
//Get the size of the tip inside, and then change the size of the outer layer to this size
var _height=size.height||this.tip_inner.offsetHeight; 
var _width=size.width||this.tip_inner.offsetWidth; 
var now_this=this; 
//Start defining animation
var ani=new YAHOO.util.Anim(this.tip_outer, {height:{to:_height},width:{to:_width}},0.7) 
//After the first animation ends, the text is usually wrong Yes, because the word will change the height due to the change of width, this is dynamic and unpredictable, so here
//Check again
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(); 
}, 

The comments are very detailed , Needless to say, there is only one function left for this object, which is to fill the data. This function can be executed multiple times, and each time it will lead to changes in data and size

Copy code The code is as follows:

/**
* Change the filling data 
* @param data A json object, including three parts of data {hd_data:"",pic_data:"",bd_data:""} 
*/ 
updateData:function(data){ 
this.data={ 
hd_data:null?"No description":data.hd_data,// Title data
pic_data:null?"#":data.pic_data,//Picture data, normally it should be a URL
bd_data:null?"No description":data.bd_data//Theme content data 
} 
//Fill data
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; 
//Fill the image
this.pic=new Image(); 
this.pic.src =this.data.pic_data; 
this.pic.errorpic=new Image(); 
this.pic.errorpic.src="http://www.jb51.net/logo.gif";// Image displayed when image loading error 
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(); 
}, 

This object is over here. Isn’t it very simple? It is already complete. Now let’s start it. We set some data and then fill it in randomly. Every time you click on the page, different data will be filled.

Copy code The code is as follows:

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=[ 
"I am random you believe Don't believe it", 
"Forget it if you don't believe it, click on the page and it will change", 
"It will change every time you click", 
"It may be repeated", 
"I don't care if it is repeated. Hungry, because I am random" 
]; 
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=[ 
"I recently heard that aptana is a good IDE. It also supports Ruby, which I like, and it also has good support for js, html, and css. I compared it and I still like netbeans. First of all, there is a plug-in in netbeans that can Copy and paste the coloring code into html css, but the code coloring aptana does not look good, and you can’t match it yourself. Just use net string get or something. JS is already a concise language, but it will be meaningless if it reminds you too much. , but the YUI prompts in netbeans are not the same version as the YUI I saw, they are all wrong, but I still like netbeans more. In fact, it is difficult to say whether the efficiency of programming is high or low. Once the ideas are clarified, the efficiency will naturally be high. .If the program is written quickly and the code prompts are very smart, it will be too dependent and the understanding of the idea is not deep. If you forget the front after writing, the efficiency will be slower. ", 
" can be done after some basic processing, such as To add a border and beautify it, you can paint it with a brush. This is more useful. There is a background image with words on the high-definition picture. You can paint it out and use it directly. Let’s talk about other functions. First of all, the most important one is the "ruler" ", OK", 
" Copy and paste the code into html css, but the code coloring aptana doesn't look good, and I can't match it myself. The interface of netbeans is also relatively refreshing. As for the js prompt, I have never used it. I have received advanced prompts. In Netbeans, I only need the following string of get and so on when I enter document. JS is already a concise language. Too many reminders are meaningless, but in The YUI prompts in netbeans are not the same version as the YUI I saw. They are all wrong, but I still like netbeans more. In fact, it is difficult to say that programming is efficient.", 
"Here I only use a few of mine. Let me talk about my understanding of the top platform in a relatively broad way, keep a secret for myself, and also share my thoughts with everyone. In today's society, many industries have become saturated, such as the supermarket industry. In Nanjing, Suguo Supermarket It occupies an absolute position. It can be seen everywhere. Of course, there are supermarkets like Hualian and Carrefour that have provided the above services, but we can increase our competitiveness by providing more personalized services. I am actually planning To build a non-profit vertical search website, we may get financial support from the government, but I haven't disclosed it to anyone except my girlfriend so far. If anyone is interested in this, you can discuss it with me." 
] 
var config={ 
hd_data:hd_arr.rand(), 
pic_data:pic_arr.rand(), 
bd_data:bd_arr.rand() 
} 
Tip.updateData(config ); 

} 
} 