컨텐츠 크기에 따른 레이어의 동적 그래디언트 변경을 구현하려면 js를 사용하세요.

다음에는 이런 컴포넌트를 직접 구현해보겠습니다. 다른 자료를 참고하지 않고 순수하게 직접 작성해보겠습니다.

제 방법은 아주 간단하다고 생각합니다. 외부에 레이어만 추가하면 많은 양의 텍스트를 수용할 수 있습니다. (왜 이렇게 말씀하시나요? 단순한 그림이라면, 조정하기가 훨씬 쉽고, 큰 문자열이 있는 경우 너비를 변경하면 단어가 늘어나는 높이로 압축되기 때문에 두 번 변환해야 합니다. 또 다른 방법은 먼저 변환한 다음 변환 후 다시 확인하는 것입니다. 즉, 첫 번째 방법이 잘 작동합니다. 하지만 매번 업데이트하면 자연스럽게 부담이 늘어납니다. 두 효과는 거의 동일하지만 성능은 좋고 나쁘지 않습니다.)

구현 원리는 매우 간단합니다. 즉, 본체 레이어를 외부에 두는 것입니다. 우리가 조정하는 것은 바로 이 레이어입니다. 먼저 이 레이어의 너비와 높이를 작은 크기로 설정한 다음 오버플로를 숨김으로 설정하고 런타임 중에 내부 콘텐츠의 크기를 결정한 다음 다시 돌아와서 크기를 조정합니다. 외부 레이어의.
이 프로그램은 YUI의 애니메이션 기능과 Taobao sns의 jsonhtml 객체를 사용합니다. 이 객체의 기능은 json 형식으로 표현된 html을 실제 html 구조로 변환하여 html을 구성하는 프로그램을 간단하고 명확하게 만들 수 있습니다. .

본체는 Tip부터 시작합니다. 이 컴포넌트는 싱글톤 모드로 작성했습니다. 즉, new를 사용하지 않고도 어디서나 사용할 수 있고, 모두 객체를 가리킵니다. 현재는 실험을 위해 최적화되지 않은 부분이 많고, 외부에 노출되는 인터페이스가 너무 적습니다.

코드 복사 코드는 다음과 같습니다.

var Tip=function(){
//js 싱글턴 모드를 구현한 json 객체를 직접 반환합니다.
return {
//초기화 함수
init:function(옵션){
this.config={
container:null,//Packaging 컨테이너
style:{},//Style 구성
data :{}
}
/ /스타일 구성
this.style={tip:null,tip_title:null,tip_pic:null,tip_bd:null}
//혼합 구성 옵션
mixin (this.config,options)
/ /초기 데이터
this.data={
//제목 데이터
hd_data:this.config.data.hd_data==null?"설명 없음": this.config.data.hd_data,
//사진 데이터, 일반적으로 URL이어야 합니다
pic_data:this.config.data.pic_data==null?"#":this.config.data.pic_data,
//테마 콘텐츠 데이터
bd_data:this.config.data.bd_data==null?"설명 없음":this.config.data.bd_data
}
//스크롤링 gif를 정의합니다. Image
this.loading_pic=new Image();
this.loading_pic.src="http://www.sj33.cn/sc/UploadFiles_6888/200803/20080320132838323.gif"; .creatHtml(); //html 생성자 호출
},

js가 이렇게 작성되는 이유는 몇몇 라이브러리에서 배운 작성 방법이 있는데 별로 설명하지 않겠습니다. , 그리고 코멘트도 매우 명확합니다. 여기서는 후속 프로그램에서 처리하기 위해 일부 데이터를 초기화하는 것입니다.

코드를 복사하세요 코드는 다음과 같습니다.

/**
* HTML 구조 구성
*/
creatHtml:function(){
//외부에서 두 번째 레이어의 스타일로 내부의 모든 요소를 ​​감싸며 크기는 다음과 같습니다.
this.style.tip={
배경색상:"#fff",
색상:"#fff",
테두리:"1px #333 단색",
패딩:"10px" ,
overflow:"visible"
}
//제목 스타일
this.style.tip_title={
color:"#037DF9",
글꼴 크기: "14px",
fontWeight: "bold"
}
this.style.tip_pic={

}
//텍스트 콘텐츠 스타일
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={
테두리:"5px 솔리드 #037DF9",
오버플로:"숨김",
너비:"10px",
높이:"10px"
}
/ /Mixing 옵션, 즉 외부에서 정의한 다음 기본 스타일
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", 스타일: 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)
//컨테이너에 추가
vartip_container=this.config.container||document.body;
tip_container.appendChild(html)
//데이터 채우기, 애니메이션 등과 같은 후속 작업을 위해 아래의 일부 요소를 가져옵니다.
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')
//이번에 초기화되었으며, 이 함수가 처음 호출되는 크기 적응 함수입니다
this.updateSize. ();
},

위에서 처음으로 나타나는 updateSize() 함수인데, 아쉽게도 이 함수는 매우 짧습니다.

코드 복사 코드는 다음과 같습니다.

/**
* 자동 크기 조정
*/
updateSize:function (크기){
//여기서 A가 사용됩니다. 매우 불친절한 해킹입니다. 즉, 대부분 외부에서 조정할 높이를 계산한 다음 여기에서 조정하는 대신 전달합니다.
// 물론 매개변수도 전달할 수 없기 때문에 여기서 계산이 좀 더 번거롭습니다
var size=size||{width:null,height:null}
//팁의 크기를 가져옵니다. 그런 다음 외부 레이어의 크기를 이 크기로 변경합니다
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 )
//첫 번째 애니메이션이 끝나면 일반적으로 텍스트가 잘못됩니다. 네, 너비 변경으로 인해 단어의 높이가 변경되기 때문에 이는 동적이며 예측할 수 없으므로 여기서
//다시 확인하세요
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()
});
},


설명이 매우 상세합니다. 말할 필요도 없이 이 개체에는 데이터를 채우는 함수만 남았습니다. 이 함수는 여러 번 실행할 수 있으며, 매번 데이터와 크기가 변경됩니다

코드 복사 코드는 다음과 같습니다.

/**
* 채우기 데이터 변경
* @param data 데이터의 세 부분을 포함하는 json 객체 {hd_data:"",pic_data:"",bd_data:""}
*/
updateData:function(data){
this.data={
hd_data:null?"설명 없음":data.hd_data,// 제목 데이터
pic_data:null?"#":data.pic_data,//그림 데이터, 일반적으로 URL이어야 합니다
bd_data:null?"설명 없음":data.bd_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
//이미지 채우기
this.pic=new Image()
this.pic.src = this.data.pic_data;
this.pic.errorpic=new 이미지();
this.pic.errorpic.src="http://www.jb51.net/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. appendChild(this.errorpic)
now_this.updateSize({width:this.errorpic.width 20})
}
this.updateSize()
},

이 개체는 여기서 끝납니다. 이미 완료되었습니다. 이제 시작하겠습니다. 페이지를 클릭할 때마다 무작위로 채워집니다. 🎜>

코드 복사 코드는 다음과 같습니다.

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가 제가 좋아하는 Ruby도 지원하고 js, html, 비교해봤는데 여전히 netbeans가 마음에 듭니다. 우선 netbeans에 색칠 코드를 복사해서 html css에 붙여넣을 수 있는 플러그인이 있는데, 코드 색칠 aptana가 보기에 좋지 않아서 그럴 수도 있어요. 그냥 net string get 등을 사용하세요. JS는 이미 간결한 언어이지만 너무 많이 생각나게 하면 의미가 없습니다. 하지만 netbeans의 YUI 프롬프트는 제가 본 YUI와 동일한 버전이 아닙니다. 모두 틀렸지만 저는 사실 프로그래밍의 효율성이 높다고 말하기는 어렵습니다. 일단 아이디어가 명확해지면 당연히 효율성이 높아집니다. 그리고 코드 프롬프트가 너무 똑똑해서 너무 의존적이고 아이디어에 대한 이해가 깊지 않습니다. 작성한 후 앞부분을 잊어버리면 ",
"은 몇 가지 기본적인 처리 후에 완료될 수 있습니다. , 테두리를 추가하고 아름답게 하려면 브러시로 칠하면 됩니다. 고화질 그림에 단어가 포함된 배경 이미지가 있으므로 직접 칠할 수 있습니다. 다른 기능에 대해서 우선 가장 중요한 것은 "ruler" ", OK",
" 코드를 html css에 복사해서 붙여넣었는데, aptana 코드 색상이 잘 안보여서 그럴 수가 없네요. netbeans의 인터페이스도 비교적 신선합니다. js 프롬프트는 사용한 적이 없습니다. Netbeans에서는 문서를 입력할 때 다음 문자열만 필요합니다. .JS는 이미 간결한 언어입니다. 알림이 너무 많으면 의미가 없지만 netbeans의 YUI 프롬프트는 모두 잘못되었지만 실제로는 여전히 netbeans를 더 좋아합니다. 프로그래밍이 효율적이라고 말합니다.",
"여기서는 제가 이해한 것 중 몇 가지만 사용하겠습니다. 상대적으로 상위 플랫폼에 대한 제가 이해한 내용에 대해 이야기하고, 비밀은 비밀로 하고, 제 생각도 다른 분들과 공유하겠습니다. 오늘날의 사회에서는 슈퍼마켓 산업과 같은 많은 산업이 포화되었습니다. 난징에서는 Suguo Supermarket이 절대적인 위치를 차지하고 있습니다. 물론 화련이나 까르푸와 같은 슈퍼마켓도 있습니다. 하지만 보다 개인화된 서비스를 제공함으로써 경쟁력을 높일 수 있습니다. 저는 실제로 비영리 수직 검색 웹사이트를 구축하려고 계획 중입니다. 정부로부터 재정적 지원을 받을 수도 있지만, 여자 친구 외에는 누구에게도 공개하지 않았습니다. 관심 있는 분이 계시다면 저와 상의해 보세요."
]
var config={
hd_data:hd_arr.rand(),
pic_data:pic_arr.rand(),
bd_data:bd_arr.rand()
}
Tip.updateData(config )

}
}


데모 주소: http://beiju123.cn/blog/addLink_1.html
작성자: http://www.cnblogs.com/mars-bird