焼きたての JS ヒント プロンプト効果_JavaScript スキル

互換性はテストされています: IE6IE7IE8FF3CHROME10

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

=" http://www.w3.org/1999/xhtml">










id= 'テスト'>







< a href ='#' id='test2' onmouseover="tips.show('通常のリンクまたはボタンのヒント - グレー - マウスを離すと消える - 300 ピクセル', 'test2', null, '#000000', 300) " onmouseout="tips.hidden('test2')">通常のリンクまたはボタン プロンプト

<script> <br>//プロンプト メッセージ クラス<br>vartips = { <br>temp : {}, <br>/*** <br>* ポップアップ プロンプト<br>* <br>* @param string msg プロンプト テキストの内容<br>* @param string id プロンプトをポップアップするターゲット オブジェクトの ID ID が間違っている場合/ null/false/0、メイン ウィンドウ ポップアップ<br>* @param int time スケジュールされた消失時間 (ミリ秒)。null/0/false の場合、スケジュールされません。<br>* @param string colorプロンプト コンテンツの背景色の形式は #000000 <br>* @param int width プロンプト ウィンドウの幅、デフォルトは 300 <br>*/ <br>show : function(msg, id, time, color, width) <br>{ <br>var target = this._get(id ); <br>if(!target) { id = 'window'; } <br><br>// ポップアップした場合は、削除して再度ポップアップします<br>if(this._get(id ' _tips')) { this.remove (id); } <br><br>// デフォルト値を設定します <br>msg = msg || '#ea0000'; <br>幅 = 幅 || ; <br>時間 = 時間 ? parseInt(time) : false; <br><br>if(id=='window') { <br>var y = document.body. clientHeight/2 document.body.scrollTop; <br>var x = (document.body.clientWidth-width)/2; <br>var textAlign = 'center'、fontSize = '15'、fontWeight = 'bold'; 🎜>} else { <br>/ /オブジェクト座標情報を取得<br>for(var y=0,x=0; target!=null; y =target.offsetTop, x =target.offsetLeft, target=target.offsetParent ); <br>var textAlign = 'left', fontSize = '12',fontWeight = 'normal'; <br><br>//ポップアッププロンプト<br>vartipsDiv = this._create( {display:'block',position:'absolute',zIndex:'1001',width:(width-2) 'px',left:(x 1) 'px',padding:'5px',color:'# ffffff',fontSize:fontSize 'px',backgroundColor :color,textAlign:textAlign,fontWeight:fontWeight,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id '_text', innerHTML: msg, onclick:function(){tips.hidden (id);}}); <br>document.body.appendChild(tipsDiv); <br>tipsDiv.style.top = (y-tipsDiv.offsetHeight-12) ' px'; <br>document.body.appendChild (this._create({display:'block',position:'absolute',zIndex:'1000',width:(width 10) 'px',height:(tipsDiv. offsetHeight-2) 'px',left:x 'px',top:(y-tipsDiv.offsetHeight-11) 'px',backgroundColor:color,filter:'Alpha(Opacity=50)',opacity:'0.7' }, {id:id '_bg'}) ); <br>if(id!='window') { <br>var arrow = this._create({display:'block',position:'absolute',overflow :'hidden',zIndex:'999'、幅:'20px'、高さ:'10px'、左:(x 20) 'px'、上:(y-13) 'px'}、{id:id ' _arrow'}); <br>arrow.appendChild (this._create({display:'block',overflow:'hidden',width:'0px',height:'10px',borderTop:'10px ソリッド ' color,borderRight :'10px ソリッド #fff', borderLeft:' 10px ソリッド #fff',filter:'Alpha(Opacity=70)',opacity:'0.8'})); <br>document.body.appendChild(arrow); 🎜>} <br><br>// マークが出ました<br>this.temp[id] = id; <br><br>//タイマーがオフの場合<br>if(time) { setTimeout(function(){tips.hidden(id);}, time ) } <br><br>return id; <br>}, <br>/*** <br>* プロンプトを非表示にする <br>* <br>* @param string id メイン ウィンドウを非表示にする場合、プロンプト ID は window です。 、ID は空でもかまいません <br>*/ <br>hidden : function( id) <br>{ <br>if(!id) { for (var i in this.temp) { this.hidden(i) } return; } <br>var t = this._get(id '_text' )、d = this._get(id '_bg')、a = this._get(id '_arrow'); <br>if(t) { t.parentNode.removeChild(t) } <br>if(d) ) { d.parentNode.removeChild(d); } <br>if (a) { a.parentNode.removeChild(a) } <br>}, <br>_create : function(set, attr) <br>{ <br>var obj = document.createElement('div'); <br>for(var i in set) { obj.style[i] = set[i]; } <br>for(var i in attr) { obj[i] = attr[i]; } <br>return <br>}, <br>_get : function(id) <br>{ <br>return document.getElementById(id); <br>}; <br><br><br>window.onload = function(){ <br>tips.show('メイン ウィンドウのヒント-緑-不規則-300 ピクセル', null, null, '#009900' , 300); <br>tips.show('フォーム エラーのヒント - 赤 - 3000 ミリ秒で消える - 250 ピクセル', 'test', 3000, '#ea0000', 250); <br>} <br>ドキュメント。 onclick = function(){ <br>tips.hidden() <br>} <br></script>