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

/**
* 채우기 데이터 변경
* @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