JavaScript浮动定位提示效果实现代码页1/2

这种效果本身并不难，主要在程序结构和扩展上做了努力，让使用起来更方便，用在更多的地方。程序特点1、多个触发元素使用同一个提示框时，只需要一个实例；2.点击模式和触发模式可以分别选择显示和隐藏。3、可以设置延时显示和隐藏；4.共有25个预设定位位置。5.您可以根据预设的定位来自定义定位。6、可设置自适应窗口定位；程序说明【提示对象】提示对象是显示提示信息的容器，程序用提示属性表示。对此没有要求，程序初始化时会进行一些设置。首先设置以下设置：复制代码如下： var css=this。_ cssTipCSS . margin=0；css.position=“绝对”；css.visibility=“隐藏”；css.display=' blockcss.zIndex=99css.left=this。_ CSS tip . top='-9999 px '；之所以将边距设置为0，是为了避免一些定位问题，之所以用可见性来隐藏而不是显示，是因为程序需要获得Tip的offsetWidth和offset third，还需要将左侧和顶部设置为滚动条，避免出现Tip被占用的情况。由于Tip可能在其他定位元素中，应设置两个偏移校正参数：复制代码如下：Varileft=0，itop=0，p=this.tipwhile(p . offsetparent){ p=p . offsetparent；iLeft=p.offsetLeftiTop=p.offsetTop};这个。_ offsetleft=iLeft这个。_ offsettop=iTop最后，在Tip的鼠标悬停上添加一个事件，这将在后面解释。【触发对象】因为很多情况下是一个Tip对应多个地方，程序引用Table的排序方法，增加了Add方法。一个Tip实例化后，可以使用Add方法将触发器对象添加到多个触发器元素中，当前触发器对象由程序中的_trigger属性表示。Add方法的一个必要参数是触发器元素，它是触发Tip显示的元素。如有必要，还可以使用options参数自定义触发器对象的属性，包括：属性：默认值//说明复制代码如下： ShowType: 'both '，//显示模式HideType: 'both '，//隐藏模式ShowDelayType: 'touch '，//显示延迟模式HideDelayType: ' touch '，//隐藏延迟模式ShowDelay: 300，//显示延迟时间HideDelay:{ }//隐藏时的具体功能后面会解释。这些默认值可以在程序初始化时修改。一个经典的应用是将Tip修改为onShow中每个触发器对象对应的内容。此外，Elem属性保存触发元素。【显示和隐藏】提示效果的关键点之一是显示和隐藏提示信息。该程序通过设置提示的可见性是否隐藏来显示和隐藏提示。特定的显示和隐藏程序在显示和隐藏程序中，就绪显示和就绪集成程序主要用于处理延迟。这种提示效果的一个特点是，当鼠标移动到提示上时，它将保持显示。要实现这种效果，请为Tip: this编写鼠标悬停程序。检查(例如相关目标)cleartimeout(这。_ timer)；其中，Check程序用于判断relatedTarget是否为外部元素，即鼠标留下的元素是否为外部元素。如果是外部元素，说明目前是隐藏延迟阶段，所以只要清除定时器取消隐藏即可。这里的外部元素是指除触发元素和提示对象本身及其内部元素之外的元素。这个有点满嘴，来看看Check程序是怎么判断的：复制代码如下：返回！这个。_trigger ||！(这个。Tip===elem ||这个。_触发器。Elem===elem | |包含(这个。提示，elem) ||包含(这个。_触发器。Elem，elem))；首先，判断_trigger是否存在。如果不存在，说明刚开始触发，也可以视为外部触发。如果存在，判断传递的元素是Tip还是trigger元素本身，最后通过Contains判断是在Tip还是trigger元素内部。附言：对于包含，请参考此处的比较文档位置。

这样，我们就可以判断它是否是内部元素，最后就可以判断它是否是外部元素。【点击模式】点击模式显示是指点击触发元素时显示Tip。在Add程序中，以下程序将绑定到触发器元素的click事件：复制代码如下： addevent (elem，' click ')，bindseventlistener (this，function(e){ if (this。IsClick(触发器。ShowType) ) { if (this。CheckShow(触发器)){ this。ReadyShow(这个。IsClick(触发器。ShowDelayType))；} else { clearTimeout(这。_ timer)；};};}));根据点击显示判断是否点击显示，然后用勾选显示检测触发对象是否相同。CheckShow程序是这样的：复制代码如下： if(触发器！==这个。_trigger) { this。hide()；这个。_trigger=触发器；返回真；} else { return false};如果不是同一个触发器对象，执行Hide清理前一个触发器对象，防止冲突，然后执行ReadyShow显示。如果是同一个触发对象，说明是延时隐藏阶段，清除定时器保持显示状态就足够了。相应地，单击模式隐藏意味着在单击外部元素时隐藏提示。在ReadyShow中，通过点击隐藏时，_fCH会绑定到文档的点击事件：this。istouch(触发器。hidetype) addevent(这。_触发器。elem，mouseout，这个。_ fth)；请注意，隐藏绑定事件应该放在就绪显示中，而不是显示中，因为隐藏事件可能会在延迟期间显示之前被触发。其中_fCH是初始化时定义的属性，用于添加和删除click-hide事件：复制代码如下：this。_ fch=bindaseventlistener (this，function(e) { if (this。检查这个。CheckHide()) { this。ReadyHide(这个。IsClick(这个。_触发器。HideDelayType))；};});请注意，与单击显示不同，因为文档是绑定的，所以在隐藏之前需要确定e.target是否是外部元素。CheckHide的功能是检查Tip当前是否处于隐藏状态：复制代码如下： if (this。_ csstip。visibility==' hidden '){ clear time out(这。_ timer)；removeEvent(此。_触发器。Elem，mouseout，这个。_ FtH)；这个。_ trigger=nullremoveEvent(文档，“单击”，这。_ FCh)；返回false} else { return true};如果是隐藏的，只需清除定时器即可移除事件，无需执行Hide。【触发模式】触发模式针对鼠标悬停和鼠标退出，其过程与点击模式类似。触发显示是指当鼠标从外部元素进入触发元素(触发鼠标悬停)时，提示的显示。在Add程序中，以下程序将绑定到触发器元素的mouseover事件：复制代码如下： addevent (elem，‘mouse over’，bindseventlistener (this，function(e){ if (this。IsTouch(触发器。ShowType) ) { if (this。CheckShow(触发器)){ this。ReadyShow(这个。IsTouch(触发器。ShowDelayType))；} else if(这个。check(e . relatedTarget)){ clear time out(这个。_ timer)；};};}));与click方法类似，您还需要执行CheckShow，但不同的是，您还将使用Check来判断e.relatedTarget是否是外部对象。这是因为鼠标悬停可能由触发元素的内部元素(包括Tip)的输入或内部元素的冒泡触发，这不需要任何操作。相应地，触发模式隐藏意味着当鼠标离开触发元素或提示时隐藏提示。当TouchHide为true时，_fTH将在ReadyShow: this期间绑定到触发器元素的mouseout事件。istouch(触发器。hidetype) addevent(这。_触发器。elem，mouseout，这个。_ fth)；在展示时间，绑定到鼠标离开提示：这。isclick(触发器。hidetype) addevent(文档，“点击”，这个。_ fch)；ReadyShow中绑定的原因同上，只需要显示提示即可。

其中，_fTH类似于_fCH，也是初始化时定义的属性，用于添加和删除触发器隐藏事件：复制代码如下：this。_ fth=bindaseventlistener (this，function(e) { if (this。检查这个。CheckHide()) { this。ReadyHide(这个。IsTouch(这个。_触发器。HideDelayType))；};});不同的是，mouseout在检查时使用了e.relatedTarget。【触发原理】以上是从程序的角度展示了触发显示和隐藏的过程，但如果真正理解的话，还需要详细分析。以下是以触发模式下的显示和隐藏为例的流程图：。

以下是文字说明：1。等待触发显示；2.输入触发元素。如果设置了延迟，跳到3。如果未设置延迟，跳到4。3、在延时时间内，留给外部元件，清除定时器，返回1，延时超过则跳到4；4.执行显示程序；5、显示提示状态；6.离开触发元件。如果输入提示，请跳到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 '，//水平定位valign3360' clienttop '，//垂直定位customleft : 0 0，//自定义左定位customtop : 0 0，//自定义上定位percentleft : 0 0，///自定义左百分比定位PercentTop://自定义上百分比定位Adaptive: false，//是否【默认定位和自定义定位】默认定位是指使用程序的25个预设位置进行定位。这25个座位是怎么来的？具体演示见下：。

阅读下一页的全文。