JavaScript ヒントプロンプトボックスコンポーネントの実装コード_JavaScript ヒント

WBOY

リリース： 2016-05-16 18:15:59

オリジナル

1326 人が閲覧しました

tip.js

 
 functiontips(obj,tag){ 
vartip = document.createElement('div'),arg= argument[2],left,top; //ヒントボックスを作成します 
var bodywid= document.documentElement.clientWidth; //ここではコンテナの幅に置き換えることもできます $(id).outerWidth(); 
var abs = obj.getElementsByTagName(tag); 
tip.className="tip_bd"; obj.appendChild(tip); 
for(var i=0,len=abs.length;ihover(abs[i],function(){ 
var content = arg||this.getAttribute( 'tip'),text; 
left = Position(this).left,top=position(this).top; 
content?tip.innerHTML=content:tip.innerHTML= "まだコンテンツがありません!"; 
if(left parseInt(getStyle(tip,'width'))>bodywid) // 現在の位置が最大幅を超えているかどうかを判断します
text='right:' (bodywid -left) 'px;left:auto ;'; 
else 
text='left:' (left this.offsetWidth) 'px;'; 
text ='top:' (top this.offsetHeight) ) 'px;'; 
tip.style.cssText=''; 
tip.style.display='block'; tip.style.display='none' ; 
}); 
} 
} 
function hover(el,fnOver, fnOut){//マウスオーバー function
addEvent(el,' Mouseover',fnOver); 
addEvent(el,'mouseout',fnOut); 
function addEvent(el,type,fn){ //イベントをバインドします
if(el.attachEvent) { 
el[' e' type fn] = fn; //これがウィンドウの代わりに el オブジェクトを指すように、IE の下の要素参照をコピーします。 
el[type fn] = function(){el[' e' type fn](window.event) ;} 
el.attachEvent('on' type, el[type fn]); 
}else 
el.addEventListener(type, fn, false); 
} 
functionposition( el){//dom ノードの絶対位置
if(el&&el.nodeType == 1) 
return {'left':el.getBoundingClientRect().left document.documentElement.scrollLeft,'top':el.getBoundingClientRect().top document.documentElement.scrollTop}; 
} 
function getStyle(obj,styleName){//現在のスタイル属性を取得します
 (obj.currentStyle)//ie 
return obj .currentStyle[styleName] 
else{ //ff 
var $arr=obj.ownerDocument.defaultView.getComputedStyle(obj, null); return $arr[styleName]; 
} 
} 
tips(document.getElementById('tips'),'a'); 

 
シンプルなタイトルのようなヒントエフェクト, しかし、実際のコンテンツは非常に充実しています。上記の js は、tip.js として保存されます。以下は、使用されるデモです。 

コードをコピー

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

><メタ名="キーワード"コンテンツ="" />
<タイトル>プロンプトメッセージボックス< ;link rel="stylesheet" type="text/css" href="style/css/tip.css" />

ヒントボックス

Script House今日公開された IT 記事「Web プログラムの実行効率を向上させるための 30 の良い経験」。これらの 30 のガイドラインは、Web 開発にとって非常に重要です。知っていてもそれが何なのかは知らない場合に非常に役立ちますScript Homeだからこそ。以下は、これらのガイドラインに関する私の理解と分析です。また、

著者別の最新記事