JavaScript 実用的なテキスト チェーン プロンプト ボックス エフェクト_テキスト 特殊効果

このエフェクトは基本的に次の機能を実現します。
(1) 記事内のリンク テキスト上でマウスをスライドすると、対応する位置にプロンプ​​ト ボックスが表示されます。プロンプト ボックスのスタイルは CSS によって制御されます。適応性が高く、マウスはプロンプト ボックスの中央をクリックできます。プロンプト ボックスからスライドすると、リンクは自動的に消えます。
(2) リンク テキストの場合、プロンプト ボックスの位置を制御します。がテキスト フィールドの左側にある場合、プロンプト ボックスは右側に表示されるため、テキスト フィールドから離れることはありません。逆に、リンク テキストがテキスト フィールドの右側にある場合は、プロンプトが表示されます。ボックスは左側に表示される必要があります。
(3) テキストフィールドに多くのコンテンツが含まれており、リンクテキストがブラウザの下部にある場合は、プロンプトを表示するためにボックスを表示したままにしてはいけません。

1.css

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

.main{width:950px; border:#9C3 1px margin:0 auto; ; line-height:25px;font-size:14px; 位置:relative;}
span{border:#70bce4 2px; 位置:absolute:5px 10px;フォントサイズ:12px; 幅:200px; 表示:なし;}
.cur{color:#900;}

2.js

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

//オブジェクト要素を取得する関数
function $a(id,tag){ var re =(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}
関数のヒント( ){
//テキストフィールド内の a 要素のリストを取得します。
vararticle=$a("article","a")
for(i=0;i//要素を走査します。クラス「cur」を含まない要素は後続のコードを実行しません。
if(article[i].className.indexOf("cur")==- 1) 続行;
article[i].onmouseover=function(e){
//ドキュメントのコンテンツの影響を受けずに、ブラウザの表示領域内のマウス ポインタの座標を取得します。 e||event;
posX = e.clientX;
posY = e.clientY;
var bodyhe=documentElement.clientHeight; 🎜>var parwidth=$a ("article").offsetWidth;
vartipbox=get_nextSibling(this);
var boxlist=$a("article","span")
//テキストエリアのスパンチップボックス 非表示状態です。
for(j=0;jboxlist[j].style.display="none"; [j].innerHTML=" 背景データを入力してください"
}
//現在のヒント ボックスの表示を設定します。
tipbox.style.display="block"; this.offsetWidth;
/*
記事としての ID を持つ div には相対位置が追加されているため、すでにヒント ボックスの親になっています。
ポップアップ ボックスの表示位置を制御します。 ;
*/
tipbox.style .left=(this.offsetLeft>parwidth/2?this.offsetLeft-w:this.offsetLeft) "px";
tipbox.style.top=(posY ヒントボックス) .offsetHeight>bodyhe?this.offsetTop-tipbox.offsetHeight :document.all?this.offsetTop 15:this.offsetTop this.offsetHeight) "px";
tipbox.onmouseover=function(){this.style.display= "block";}
tipbox.onmouseout= this.onmouseout=function(){tipbox.style.display="none";}
}
}
}
// を取得オブジェクト要素の次のラベル ノード;
function get_nextSibling (n){
var x=n.nextSibling;
while (x.nodeType!=1){
x=x.nextSibling; 🎜>}
return x;
}


ソースファイルのコードを投稿することに興味のある友人は、それをテストすることができます。質問がある場合は、メッセージを残してください＠&＠

コードをコピーします

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