JavaScript フローティング位置プロンプト効果の実装 code_javascript スキル

私は当初、フローティング配置とマウス追従を組み合わせたツールチップ効果を作成したいと思っていましたが、いくつかの重要な場所で配置とマウス追従が依然として異なることが判明したため、別々に行う必要があります。

このエフェクト自体はそれほど難しいものではありません。主に、より使いやすく、より多くの場所で使用できるようにするために、プログラムの構造と拡張に力を入れています。
プログラムの機能
1. 複数のトリガー要素に同じプロンプト ボックスが使用される場合、必要なインスタンスは 1 つだけです。
2. それぞれ、表示と非表示を選択することができます。 3. 遅延表示と非表示を設定できます。
4、25 個のプリセット位置があり、
6、適応ウィンドウの位置を設定できます。 🎜>プログラムの説明
[Tip オブジェクト]
Tip オブジェクトは、プロンプト情報を表示するために使用されるコンテナであり、プログラムは Tip 属性によって表されます。これには要件はありません。プログラムの初期化時にいくつかの設定が行われます。
最初に次の設定を行います。


プログラムは Tip の offsetWidth と offsetHeight を取得する必要があるため、表示ではなく表示を使用して非表示にするため、マージンは 0 に設定されます。また、左と上はスクロール バーであり、チップがスペースを占めるために表示されるのを避けるために設定する必要があります。

ヒントは他の位置決め要素内にある可能性があるため、2 つのオフセット補正パラメータを設定する必要があります:

var css = this._cssTip; 
css.margin = 0; 
css.position = "absolute"; css.visibility = "hidden"; 
css.display = "block"; css.zIndex = 99; 
css.left = this._cssTip.top = "-9999px";

最後に、ヒントのマウスオーバーにイベントを追加します。これについては後で説明します。

[Trigger Object]

var iLeft = 0, iTop = 0, p = this.Tip; 
while (p.offsetParent) { 
p = p.offsetParent; iLeft += p.offsetLeft; iTop += p.offsetTop; 
}; 
this._offsetleft = iLeft; 
this._offsettop = iTop;

1つのTipが複数箇所のTipsに対応する場合が多いため、Tableソートメソッドを参照し、Addメソッドを追加します。

ヒントがインスタンス化された後、Add メソッドを使用してトリガー オブジェクトを複数のトリガー要素に追加できます。_trigger 属性は、現在のトリガー オブジェクトを表すためにプログラム内で使用されます。
Add メソッドの必須パラメーターは、ヒントの表示をトリガーする要素であるトリガー要素です。
必要に応じて、オプション パラメータを使用して、次のようなトリガー オブジェクトの属性をカスタマイズすることもできます。
属性: デフォルト値//説明


特定の機能については後で説明します。 、プログラムの初期化中に使用できます。これらのデフォルト値を変更します。

古典的なアプリケーションは、onShow のヒントを各トリガー オブジェクトに対応するコンテンツに変更することです。

ShowType: "both",//显示方式 
HideType: "both",//隐藏方式 
ShowDelayType: "touch",//显示延迟方式 
HideDelayType: "touch",//隐藏延迟方式 
ShowDelay: 300,//显示延时时间 
HideDelay: 300,//隐藏延时时间 
Fixed: {},//定位对象 
onShow: function(){},//显示时执行 
onHide: function(){}//隐藏时执行

さらに、トリガー要素を保存するための Elem 属性があります。

【表示と非表示】
プロンプト効果の重要なポイントの 1 つは、プロンプト情報の表示と非表示です。プログラムは、ヒントの可視性を非表示にするかどうかを設定することによって、ヒントを表示または非表示にします。
特定の表示プログラムと非表示プログラムは、それぞれ Show プログラムと Hide プログラム、および主に遅延に対処するために使用される ReadyShow プログラムと ReadyHide プログラムにあります。
このヒント効果の特徴の 1 つは、マウスがヒントの上に移動すると、ヒントが表示されたままになることです。
この効果を実現するには、Tip のマウスオーバー用のプログラムを作成します。
this.Check(e.popularTarget) && clearTimeout(this._timer);
Check プログラムは、relationalTarget がexternal element 、つまり、マウスが離れた要素が外部要素であるかどうか。
それが外部要素の場合は、現在非表示遅延段階にあることを意味するため、タイマーをクリアして再表示します。
ここでの外部要素とは、trigger 要素と Tip オブジェクト自体およびその内部要素以外の要素を指します。
これは少しややこしいですが、Check プログラムがどのように判断するかを見てみれば理解できます。


まず _trigger が存在するかどうかを判断します。存在しない場合は、_trigger が存在するだけであることを意味します。外部トリガーともみなされるトリガーが開始されました。

存在する場合は、渡された要素が Tip 要素自体であるかトリガー要素自体であるかを判断し、最後に Contains を使用してそれが Tip 要素またはトリガー要素内にあるかどうかを判断します。

return !this._trigger || 
!( 
this.Tip === elem || this._trigger.Elem === elem || 
Contains(this.Tip, elem) || Contains(this._trigger.Elem, elem) 
);

ps: Contains については、こちらの比較ドキュメントの場所を参照してください。

この方法で得られるのは、それが内部要素であるかどうかを判断することであり、最後の否定は、それが外部要素であるかどうかを判断することです。
[クリック方式]
クリック方式表示とは、トリガー要素をクリックしたときにヒントが表示されることを意味します。
追加プログラムでは、次のプログラムがトリガー要素のクリック イベントにバインドされます:


まず、ClickShow を使用してクリックして表示するかどうかを決定し、次に CheckShow を使用して検出します。同じトリガーオブジェクトかどうか。

CheckShow プログラムは次のとおりです。

addEvent(elem, "click", BindAsEventListener(this, function(e){ 
if ( this.IsClick(trigger.ShowType) ) { 
if ( this.CheckShow(trigger) ) { 
this.ReadyShow(this.IsClick(trigger.ShowDelayType)); 
} else { 
clearTimeout(this._timer); 
}; 
}; 
}));

同じトリガー オブジェクトでない場合は、まず Hide を実行して前のトリガー オブジェクトをクリーンアップして競合を防ぎ、次に ReadyShow を実行してそれを表示します。

同じトリガー オブジェクトの場合は、現在遅延された隠しステージにあることを意味します。タイマーをクリアして表示したままにしてください。

if (trigger !== this._trigger) { 
this.Hide(); this._trigger = trigger; return true; 
} else { return false; };

同様に、クリックによる非表示とは、外部要素をクリックしたときにヒントを非表示にすることを意味します。

ReadyShow では、クリック メソッドを使用して非表示にする場合、_fCH はドキュメントのクリック イベントにバインドされます:
this.IsTouch(trigger.HideType) && addEvent(this._trigger.Elem, "mouseout ", this._fTH);
遅延中に、非表示のイベントが表示される前にトリガーされる可能性があるため、非表示のバインディング イベントは Show ではなく ReadyShow に配置する必要があることに注意してください。
ここで、_fCH は初期化中に定義された属性で、クリックして非表示にするイベントを追加および削除するために使用されます。


これは、クリックして表示するものとは異なることに注意してください。ドキュメントの場合は、まず e.target が外部要素であるかどうかを判断する前に非表示にする必要があります。

CheckHide は、ヒントが現在非表示になっているかどうかを確認するために使用されます:

this._fCH = BindAsEventListener(this, function(e) { 
if (this.Check(e.target) && this.CheckHide()) { 
this.ReadyHide(this.IsClick(this._trigger.HideDelayType)); 
}; 
});

if (this._cssTip.visibility === "hidden") { 
clearTimeout(this._timer); 
removeEvent(this._trigger.Elem, "mouseout", this._fTH); 
this._trigger = null; 
removeEvent(document, "click", this._fCH); 
return false; 
} else { return true; };

如果本来就是隐藏状态，清除定时器移除事件就行，不需要再执行Hide了。
【触发方式】
触发方式针对的是mouseover和mouseout，它的流程跟点击方式是差不多的。
触发方式显示是指鼠标从外部元素进入触发元素（触发mouseover）的时候显示Tip。
在Add程序中会给触发元素的mouseover事件绑定以下程序： 

addEvent(elem, "mouseover", BindAsEventListener(this, function(e){ 
if ( this.IsTouch(trigger.ShowType) ) { 
if (this.CheckShow(trigger)) { 
this.ReadyShow(this.IsTouch(trigger.ShowDelayType)); 
} else if (this.Check(e.relatedTarget)) { 
clearTimeout(this._timer); 
}; 
}; 
}));

跟点击方式类似，也需要执行一次CheckShow，但不同的是，还会用Check判断e.relatedTarget是不是外部对象。
这是因为mouseover可能是从触发元素的内部元素（包括Tip）进入或内部元素冒泡触发的，而这些情况不需要任何操作。
对应的，触发方式隐藏是指鼠标从触发元素或Tip离开时隐藏Tip。
当TouchHide为true时，在ReadyShow的时候会把_fTH绑定到触发元素的mouseout事件里：
this.IsTouch(trigger.HideType) && addEvent(this._trigger.Elem, "mouseout", this._fTH);
在Show的时候，再绑定到Tip的mouseout：
this.IsClick(trigger.HideType) && addEvent(document, "click", this._fCH);
在ReadyShow绑定的原因同上，而Tip只需显示时绑定。
其中_fTH跟_fCH类似，也是在初始化时定义的一个属性，用于添加和移除触发隐藏事件： 

this._fTH = BindAsEventListener(this, function(e) { 
if (this.Check(e.relatedTarget) && this.CheckHide()) { 
this.ReadyHide(this.IsTouch(this._trigger.HideDelayType)); 
}; 
});

不同的是mouseout在Check的时候是用e.relatedTarget。
【触发原理】
上面是从程序的角度说明了触发显示和隐藏的过程，但要真正理解的话还需要做一次细致的分析。
下面是以触发方式的显示隐藏为例做的流程图：

下面是文字说明：
1，等待触发显示；
2，进入触发元素，如果设置延时，跳到3，如果没有设置延时，跳到4；
3，延时时间内，离开到外部元素，清除定时器，返回1，超过延时时间，跳到4；
4，执行显示程序；
5，显示Tip状态；
6，离开触发元素，如果是进入到Tip，跳到7，如果是离开到外部元素，跳到9；
7，保持显示状态；
8，离开Tip，如果是进入触发元素，返回5，如果是离开到外部元素，跳到9；
9，如果设置延时，跳到10，如果没有设置延时，跳到11；
10，延时时间内，如果进入Tip，清除定时器，返回7，如果进入触发元素，清除定时器，返回5，超过延时时间，跳到11；
11，执行隐藏程序，返回1；
再对照程序，应该就能理解整个流程了，当然可能还不是那么好理解。
这个流程也只是单例的情况，多例的时候还要多加一些判断。
可以说这个流程看似不难，但如果想做一个最优化的流程，那要考虑的细节地方可能会让人受不了。
点击方式跟触发方式的流程是差不多的，而且更简单，这里就不重复了。
【元素定位】
完成了显示隐藏，就到本程序另一个重点，元素定位。
程序使用一个GetRelative函数，通过定位元素、参考元素和参数对象来获取形如{ Left: 100, Top: 200 }的定位参数结果。
计算结果结合了以下定位方式：预设定位，自定义定位，自适应定位。
触发对象的Fixed属性就是用来保存定位参数对象的，包括一下属性：
属性: 默认值//说明
Align: "clientleft",//水平方向定位
vAlign: "clienttop",//垂直方向定位
CustomLeft: 0,//自定义left定位
CustomTop: 0,//自定义top定位
PercentLeft: 0,//自定义left百分比定位
PercentTop: 0,//自定义top百分比定位
Adaptive: false,//是否自适应定位
Reset: false//自适应定位时是否重新定位
下面再看看如何通过这些属性设置定位。
【预设定位和自定义定位】
预设定位的意思是使用程序25个预设位置来定位。
25个位置是怎么来的呢？看下面的具体演示：

其中黑色框代表触发元素，红色框代表Tip。
一眼望去，要实现这么多的位置好像很复杂，这时要想找到最好的方法就要细心分析找出规律。
这25个位置其实都是由5个水平坐标和5个垂直坐标组合而来的，只要计算好这10个坐标，就能组合出这25个位置来了。
其中1，2，3，4，5代表的水平坐标，程序分别用left，clientleft，center，clientright，right来标识。
而1，6，11，16，21代表的垂直坐标，程序分别用top，clienttop，center，clientbottom，bottom来标识。
ps：词穷，只好加个client来充数。
下面说说如何获取这些坐标的值，首先通过getBoundingClientRect要获取触发元素的坐标对象。
ps：关于getBoundingClientRect的介绍请看这里的元素位置。
再利用这个坐标对像，通过GetRelative.Left和GetRelative.Top来获取水平和垂直坐标。
GetRelative.Left和GetRelative.Top里面都是些简单的获取坐标算法，具体请参考代码。
使用时，把水平坐标和垂直坐标的标识值（字符）分别赋给触发对象的Align和vAlign属性，系统就会自动设置对应的位置。
例如要设置位置14，那么Align设为"clientright"，vAlign设为"center"就可以了。
至于自定义定位就是在预设定位得到的坐标基础上，根据CustomLeft和CustomTop的值再进行left和top的修正。
自定义百分比定位是以触发元素的宽和高为基准，根据PercentLeft和PercentTop取百分比：
if (options.PercentLeft) { iLeft += .01 * options.PercentLeft * relElem.offsetWidth; };
if (options.PercentTop) { iTop += .01 * options.PercentTop * relElem.offsetHeight; };
注意数值单位是0.01。
【自适应定位】
自适应定位的作用是当Tip显示的范围超过浏览器可视范围的时候，自动修正到可视范围里面。
因为上面通过getBoundingClientRect获取的定位是以视窗为准的，所以可以直接通过clientWidth/clientHeight来判断是否超过视窗范围。
首先获取最大left和top值：
var maxLeft = document.documentElement.clientWidth - fixedElem.offsetWidth,
maxTop = document.documentElement.clientHeight - fixedElem.offsetHeight;
最小值是0就不用计算了。
如果Reset属性是true会使用重新定位的方法。
理想的效果是能自动从25个预设定位中找到适合的定位位置。
但这个需求实在变化太多，要全部实现估计要长长的代码，程序仅仅做了简单的修正：
if (iLeft > maxLeft || iLeft iLeft = GetRelative.Left(2 * iLeft > maxLeft ? "left" : "right") + options.CustomLeft;
};
if (iTop > maxTop || iTop iTop = GetRelative.Top(2 * iTop > maxTop ? "top" : "bottom") + options.CustomTop;
};
实际应用的话估计要按需求重写这部分才行。
如果不是用Reset重新定位，只需要根据这几个值获取适合的值就行了：
iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
iTop = Math.max(Math.min(iTop, maxTop), 0);
【参数设计】
程序中用ShowType、HideType、ShowDelayType和HideDelayType这几个属性来设置执行方式的。
以ShowType显示方式属性为例，原来的方式是分两个bool属性ClickShowType和TouchShowType表示的。
这样的好处是程序判断方便，效率高，问题是使用不方便，感觉混乱。
为了减少参数数量，后来把属性值改成字符形式，可以是以下4个值：
"click":只用点击方式
"touch":只用触发方式
"both":两个都使用
"none":都不使用（其他字符值也当成是"none"）
这样就可以把ClickShowType和TouchShowType合并成一个ShowType来表示了。
参数数量是减少了，但程序中就必须每次都要根据字符值判断一下属于哪个类型。
为了方便程序判断，添加了IsClick和IsTouch方法，参数是上面的执行方式属性，用来判断是否使用点击和触发方式。
例如IsClick是这样的：
type = type.toLowerCase();
return type === "both" || type === "click";
这样就间接把字符判断变成bool判断，只是代码比直接bool判断长了点。
【隐藏select】
又是ie6的隐藏select问题，这里用的是iframe遮盖法。
首先初始化时插入iframe： 

var iframe = document.createElement("<iframe style=&#39;position:absolute;filter:alpha(opacity=0);display:none;&#39;>"); 
document.body.insertBefore(iframe, document.body.childNodes[0]); 
this._cssiframe = iframe.style;

在Show的时候，参照Tip设置好样式，再显示： 

var css = this._cssiframe; css.width = this.Tip.offsetWidth + "px"; css.height = this.Tip.offsetHeight + "px"; css.left = iLeft + "px"; css.top = iTop + "px"; css.display = "";

其实就是要垫在Tip的下面。
在Hidde时隐藏就可以了。
使用说明
实例化时，第一个必要参数是Tip对象：
var ft = new FixedTips("idTip");
第二个可选参数用来设置触发对象属性的统一默认值。
然后用Add方法添加触发对象：
var trigger1 = ft.Add("idTrigger1");
第二个可选参数用来设置该触发对象属性。
要添加多个触发对象时只需继续用Add添加就行了。
程序源码 

var FixedTips = function(tip, options){ 
this.Tip = $$(tip);//提示框 
this._trigger = null;//触发对象 
this._timer = null;//定时器 
this._cssTip = this.Tip.style;//简化代码 
this._onshow = false;//记录当前显示状态 
this.SetOptions(options); 
//处理Tip对象 
var css = this._cssTip; 
css.margin = 0;//避免定位问题 
css.position = "absolute"; css.visibility = "hidden"; 
css.display = "block"; css.zIndex = 99; 
css.left = this._cssTip.top = "-9999px";//避免占位出现滚动条 
//offset修正参数 
var iLeft = 0, iTop = 0, p = this.Tip; 
while (p.offsetParent) { 
p = p.offsetParent; iLeft += p.offsetLeft; iTop += p.offsetTop; 
}; 
this._offsetleft = iLeft; 
this._offsettop = iTop; 
//移入Tip对象时保持显示状态 
addEvent(this.Tip, "mouseover", BindAsEventListener(this, function(e){ 
//如果是外部元素进入，说明当前是隐藏延时阶段，那么清除定时器取消隐藏 
this.Check(e.relatedTarget) && clearTimeout(this._timer); 
})); 
//ie6处理select 
if (isIE6) { 
var iframe = document.createElement("<iframe style=&#39;position:absolute;filter:alpha(opacity=0);display:none;&#39;>"); 
document.body.insertBefore(iframe, document.body.childNodes[0]); 
this._cssiframe = iframe.style; 
}; 
//用于点击方式隐藏 
this._fCH = BindAsEventListener(this, function(e) { 
if (this.Check(e.target) && this.CheckHide()) { 
this.ReadyHide(this.IsClick(this._trigger.HideDelayType)); 
}; 
}); 
//用于触发方式隐藏 
this._fTH = BindAsEventListener(this, function(e) { 
if (this.Check(e.relatedTarget) && this.CheckHide()) { 
this.ReadyHide(this.IsTouch(this._trigger.HideDelayType)); 
}; 
}); 
}; 
FixedTips.prototype = { 
//设置默认属性 
SetOptions: function(options) { 
this.options = {//默认值 
ShowType: "both",//显示方式 
HideType: "both",//隐藏方式 
ShowDelayType: "touch",//显示延迟方式 
HideDelayType: "touch",//隐藏延迟方式 
//"click":只用点击方式,"touch":只用触发方式,"both":两个都使用,"none":都不使用 
ShowDelay: 300,//显示延时时间 
HideDelay: 300,//隐藏延时时间 
Fixed: {},//定位对象 
onShow: function(){},//显示时执行 
onHide: function(){}//隐藏时执行 
}; 
Extend(this.options, options || {}); 
}, 
//检查触发元素 
Check: function(elem) { 
//返回是否外部元素（即触发元素和Tip对象本身及其内部元素以外的元素对象） 
return !this._trigger || 
!( 
this.Tip === elem || this._trigger.Elem === elem || 
Contains(this.Tip, elem) || Contains(this._trigger.Elem, elem) 
); 
}, 
//准备显示 
ReadyShow: function(delay) { 
clearTimeout(this._timer); 
var trigger = this._trigger; 
//触发方式隐藏 
this.IsTouch(trigger.HideType) && addEvent(this._trigger.Elem, "mouseout", this._fTH); 
//点击方式隐藏 
this.IsClick(trigger.HideType) && addEvent(document, "click", this._fCH); 
//显示 
if (delay) { 
this._timer = setTimeout(Bind(this, this.Show), trigger.ShowDelay); 
} else { this.Show(); }; 
}, 
//显示 
Show: function() { 
clearTimeout(this._timer); 
this._trigger.onShow();//放在前面方便修改属性 
//根据预设定位和自定义定位计算left和top 
var trigger = this._trigger, 
pos = GetRelative(trigger.Elem, this.Tip, trigger.Fixed), 
iLeft = pos.Left, iTop = pos.Top; 
//设置位置并显示 
this._cssTip.left = iLeft - this._offsetleft + "px"; 
this._cssTip.top = iTop - this._offsettop + "px"; 
this._cssTip.visibility = "visible"; 
//ie6处理select 
if (isIE6) { 
var css = this._cssiframe; 
css.width = this.Tip.offsetWidth + "px"; 
css.height = this.Tip.offsetHeight + "px"; 
css.left = iLeft + "px"; css.top = iTop + "px"; css.display = ""; 
}; 
//触发方式隐藏 
this.IsTouch(trigger.HideType) && addEvent(this.Tip, "mouseout", this._fTH); 
}, 
//准备隐藏 
ReadyHide: function(delay) { 
clearTimeout(this._timer); 
if (delay) { 
this._timer = setTimeout(Bind(this, this.Hide), this._trigger.HideDelay); 
} else { this.Hide(); }; 
}, 
//隐藏 
Hide: function() { 
clearTimeout(this._timer); 
//设置隐藏 
this._cssTip.visibility = "hidden"; 
this._cssTip.left = this._cssTip.top = "-9999px"; 
//ie6处理select 
if (isIE6) { this._cssiframe.display = "none"; }; 
//处理触发对象 
if (!!this._trigger) { 
this._trigger.onHide(); 
removeEvent(this._trigger.Elem, "mouseout", this._fTH); 
} 
this._trigger = null; 
//移除事件 
removeEvent(this.Tip, "mouseout", this._fTH); 
removeEvent(document, "click", this._fCH); 
}, 
//添加触发对象 
Add: function(elem, options) { 
//创建一个触发对象 
var elem = $$(elem), trigger = Extend( Extend( { Elem: elem }, this.options ), options || {} ); 
//点击方式显示 
addEvent(elem, "click", BindAsEventListener(this, function(e){ 
if ( this.IsClick(trigger.ShowType) ) { 
if ( this.CheckShow(trigger) ) { 
this.ReadyShow(this.IsClick(trigger.ShowDelayType)); 
} else { 
clearTimeout(this._timer); 
}; 
}; 
})); 
//触发方式显示 
addEvent(elem, "mouseover", BindAsEventListener(this, function(e){ 
if ( this.IsTouch(trigger.ShowType) ) { 
if (this.CheckShow(trigger)) { 
this.ReadyShow(this.IsTouch(trigger.ShowDelayType)); 
} else if (this.Check(e.relatedTarget)) { 
clearTimeout(this._timer); 
}; 
}; 
})); 
//返回触发对象 
return trigger; 
}, 
//显示检查 
CheckShow: function(trigger) { 
if ( trigger !== this._trigger ) { 
//不是同一个触发对象就先执行Hide防止冲突 
this.Hide(); this._trigger = trigger; return true; 
} else { return false; }; 
}, 
//隐藏检查 
CheckHide: function() { 
if ( this._cssTip.visibility === "hidden" ) { 
//本来就是隐藏状态，不需要再执行Hide 
clearTimeout(this._timer); 
removeEvent(this._trigger.Elem, "mouseout", this._fTH); 
this._trigger = null; 
removeEvent(document, "click", this._fCH); 
return false; 
} else { return true; }; 
}, 
//是否点击方式 
IsClick: function(type) { 
type = type.toLowerCase(); 
return type === "both" || type === "click"; 
}, 
//是否触发方式 
IsTouch: function(type) { 
type = type.toLowerCase(); 
return type === "both" || type === "touch"; 
} 
};