jsを利用して、コンテンツサイズに応じたレイヤーの動的グラデーション変化を実現します。

次に、そのようなコンポーネントを自分で実装します。他の資料を参照せず、純粋に自分で書きました。

私の方法は非常にシンプルで、外側に追加のレイヤーを追加するだけで、大量のテキストを収容できると思います (なぜこれを言うのですか? 単純な画像であれば、調整ははるかに簡単で、幅を変更すると単語が高さに詰め込まれてしまうため、大きな文字列がある場合は 2 回変換する必要があります。 1 つは調整方法です。アニメーションの各サイクルで最新の高さと幅を更新する方法もあります。今回は、高さだけを変更し、2 回調整します。 2つの効果はほぼ同じですが、パフォーマンスは良くも悪くもありません)

実装原理は非常にシンプルで、本体レイヤーを外部に配置します。調整するのはこのレイヤーです。最初にこのレイヤーの幅と高さを小さいサイズに設定し、次にそのオーバーフローを非表示に設定し、実行時に内部のコンテンツのサイズを決定してから、サイズを調整します。外層の。
このプログラムはYUIのアニメーション機能と淘宝SNSのjsonhtmlオブジェクトを利用しています。このオブジェクトの機能は、json形式で表現されたhtmlを実際のhtml構造に変換することで、htmlを構築するプログラムをシンプルかつ明確にすることができます。 。

本体は Tip から始まります。このコンポーネントはシングルトン モードで書きました。つまり、new を使用せずにどこでも使用でき、すべてがオブジェクトを指します。現在は最適化されていません。実験のため、内部の多くのものが直接変更されており、外部に公開されるインターフェイスが少なすぎます:

コードをコピー コードは次のとおりです:

var Tip=function(){
//js シングルトン モードの実装である json オブジェクトを直接返します
return {
//初期化関数
init:function (options){
this.config={
container:null,//パッケージ化コンテナ
style:{},//スタイル設定
データ:{}
}
/ /スタイル設定
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(){
//外側から 2 番目のレイヤーのスタイル。すべての要素を内側にラップし、サイズは次のようになります。
this.style.tip={
backgroundColor:"#fff",
color:"#fff",
border:"1px #333 ソリッド",
padding:"10px" ,
overflow:"visible"
}
//タイトルスタイル
this.style.tip_title={
color:"#037DF9",
fontSize: "14px",
fontWeight: "bold"
}
this.style.tip_pic={

}
//テキストコンテンツのスタイル
this.style .tip_bd={
color:"#333",
lineHeight:"20px"
}
this.style.hr={
color:"#037DF9",
高さ :"1px",
border:"0",
borderTop:"1px #037DF9 Solid",
margin:"10px 0"
}
//最も外側のパッケージ化レイヤーのスタイル
this.style .outer={
border:"5px ソリッド #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 のソース コードを見るだけで理解できます。 tip_outer", style: this.style.outer},
">>":[
{div:{id:"tip_inner",style:this.style.tip},
"> ;>": [
{div:{className:"ヒント タイトル",style:this.style.tip_title,id:"ヒント タイトル"},">>":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 (size){
//ここでは 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();
ani.animate();
},


コメントは非常に詳細です。言うまでもなく、このオブジェクトにはデータを埋める関数が 1 つだけ残っています。この関数は複数回実行できます。毎回データとサイズが変更されます

コードをコピー

コードは次のとおりです:

/**
* 塗りつぶしデータを変更します
* @param data データの 3 つの部分を含む 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 Image();
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=""; 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 が優れた IDE であると聞きました。aptana は、私が気に入っている Ruby もサポートしており、js、html も適切にサポートしています。とcssを比較してみましたが、やはりnetbeansが好きです。 まず、netbeansには色付けコードをHTML CSSにコピー＆ペーストできるプラグインがありますが、aptanaのコード色付けは見栄えがよくありません。 net string get などを使用してください。JS はすでに簡潔な言語ですが、それを思い出させすぎると意味がありません。ただし、netbeans の YUI プロンプトは私が見た YUI と同じバージョンではありません。それらはすべて間違っていますが、私はまだ netbeans の方が好きです。実際、プログラミングの効率が高いか低いかを判断するのは困難です。プログラムが作成されれば、効率は自然に高くなります。コードプロンプトは非常にスマートですが、書いた後に前を忘れると、依存しすぎてアイデアの理解が深まりません。「、
」は、いくつかの基本的な作業を行った後に実行できます。枠線を追加して美しくする場合は、高解像度の画像に文字が入った背景画像を直接塗りつぶして使用することができます。他の機能について話します まず第一に、最も重要な機能は「ルーラー」です。 「、OK」、
」 コードをコピーして HTML CSS に貼り付けますが、aptana のコードの色付けは見栄えがよくありません。 netbeans のインターフェイスも比較的すっきりしています。js プロンプトに関しては、Netbeans では get などの文字列を入力するだけで済みます。 JS はすでに簡潔な言語です。ただし、NetBeans の YUI プロンプトは私が見た YUI と同じバージョンではありません。しかし、実際のところ、私は依然として NetBeans の方が好きです。プログラミングが効率的であるとは言いがたいです。",
"ここでは、私の考えのほんの一部だけを使用して、トップ プラットフォームについての私の理解を比較的広範に話して、自分自身の秘密にし、私の考えも共有したいと思います。今日の社会では、スーパーマーケット業界は飽和状態になっており、当然、花蓮やカルフールなどのスーパーマーケットが絶対的な地位を占めています。上記のサービスを提供していますが、よりパーソナライズされたサービスを提供することで競争力を高めることができます。非営利の垂直検索 Web サイトを構築するには、政府からの資金援助が得られる可能性がありますが、ガールフレンド以外には公開していません。これについて興味がある人は、私と話し合ってください。"
]
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