JavaScript教程:网页浮动定位提示效果(6)

自适应定位：

自适应定位的作用是当Tip显示的范围超过浏览器可视范围的时候，自动修正到可视范围里面。
因为上面通过getBoundingClientRect获取的定位是以视窗为准的，所以可以直接通过clientWidth/clientHeight来判断是否超过视窗范围。
首先获取最大left和top值：

var maxLeft = this._doc.clientWidth - this.Tip.offsetWidth,
    maxTop = this._doc.clientHeight - this.Tip.offsetHeight;

最小值是0就不用计算了。

如果Reset属性是true会使用重新定位的方法。
理想的效果是能自动从25个预设定位中找到适合的定位位置。
但这个需求实在变化太多，要全部实现估计要长长的代码，程序仅仅做了简单的修正：

if (iLeft > maxLeft || iLeft < 0) {
    iLeft = this.GetLeft(rect, 2 * iLeft > maxLeft ? "left" : "right") + customLeft;
};   
if (iTop > maxTop || iTop < 0) {
    iTop = this.GetTop(rect, 2 * iTop > maxTop ? "top" : "bottom") + customTop;
};

实际应用的话估计要按需求重写这部分才行。

如果不是用Reset重新定位，只需要根据这几个值获取适合的值就行了：

iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
iTop = Math.max(Math.min(iTop, maxTop), 0);

隐藏select：

又是ie6的隐藏select问题，这里用的是iframe遮盖法。

首先初始化时插入iframe：

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

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

this._iframe.style.left = iLeft + this._docScroll.scrollLeft + "px";
this._iframe.style.top = iTop + this._docScroll.scrollTop + "px";
this._iframe.style.width = this.Tip.offsetWidth + "px";
this._iframe.style.height = this.Tip.offsetHeight + "px";
this._iframe.style.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对象 this._cssTip.margin = 0;//避免定位问题 this._cssTip.position = "absolute"; this._cssTip.visibility = "hidden"; this._cssTip.display = "block"; this._cssTip.zIndex = 99; this._cssTip.left = this._cssTip.top = "-9999px";//避免占位出现滚动条 //offset修正参数 var iLeft = 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) { this._iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>"); document.body.insertBefore(this._iframe, document.body.childNodes[0]); }; //用于点击方式隐藏 this._fCH = BindAsEventListener(this, function(e) { if (this.Check(e.target) && this.CheckHide()) { this.ReadyHide(this._trigger.ClickHideDelay); }; }); //用于触发方式隐藏 this._fTH = BindAsEventListener(this, function(e) { if (this.Check(e.relatedTarget) && this.CheckHide()) { this.ReadyHide(this._trigger.TouchHideDelay); }; }); }; FixedTips.prototype = { _doc: document.documentElement,//简化代码 //设置默认属性 SetOptions: function(options) { this.options = {//默认值 ClickShow: true,//是否点击方式显示 ClickShowDelay: false,//是否点击显示延时 ClickHide: true,//是否点击方式隐藏 ClickHideDelay: false,//是否点击隐藏延时 TouchShow: true,//是否触发方式显示 TouchShowDelay: true,//是否触发显示延时 TouchHide: true,//是否触发方式隐藏 TouchHideDelay: true,//是否触发隐藏延时 ShowDelay: 300,//显示延时时间 HideDelay: 300,//隐藏延时时间 Align: "clientleft",//水平方向定位 vAlign: "clienttop",//垂直方向定位 Custom: { left: 0, top: 0 },//自定义定位 Percent: { left: 0, top: 0 },//自定义百分比定位 Adaptive: false,//是否自适应定位 Reset: false,//自适应定位时是否重新定位 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; //点击方式隐藏 trigger.ClickHide && addEvent(document, "click", this._fCH); //触发方式隐藏 trigger.TouchHide && addEvent(this._trigger.Elem, "mouseout", this._fTH); //是否延迟触发 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, rect = trigger.Elem.getBoundingClientRect(), scrolldoc = isChrome || isSafari ? document.body : this._doc, scrollLeft = scrolldoc.scrollLeft, scrollTop = scrolldoc.scrollTop, customLeft = trigger.Custom.left, customTop = trigger.Custom.top, iLeft = this.GetLeft(rect, trigger.Align) + customLeft, iTop = this.GetTop(rect, trigger.vAlign) + customTop; //自定义百分比定位 if (trigger.Percent.left) { iLeft += .01 * trigger.Percent.left * trigger.Elem.offsetWidth; }; if (trigger.Percent.top) { iTop += .01 * trigger.Percent.top * trigger.Elem.offsetHeight; }; //自适应视窗定位 if (trigger.Adaptive) { //修正定位参数 var maxLeft = this._doc.clientWidth - this.Tip.offsetWidth, maxTop = this._doc.clientHeight - this.Tip.offsetHeight; if (trigger.Reset) { //自动重新定位 if (iLeft > maxLeft || iLeft < 0) { iLeft = this.GetLeft(rect, 2 * iLeft > maxLeft ? "left" : "right") + customLeft; }; if (iTop > maxTop || iTop < 0) { iTop = this.GetTop(rect, 2 * iTop > maxTop ? "top" : "bottom") + customTop; }; } else { //修正到适合位置 iLeft = Math.max(Math.min(iLeft, maxLeft), 0); iTop = Math.max(Math.min(iTop, maxTop), 0); }; }; //设置位置并显示 this._cssTip.left = iLeft + scrollLeft - this._offsetleft + "px"; this._cssTip.top = iTop + scrollTop - this._offsettop + "px"; this._cssTip.visibility = "visible"; //ie6处理select if (isIE6) { this._iframe.style.left = iLeft + scrollLeft + "px"; this._iframe.style.top = iTop + scrollTop + "px"; this._iframe.style.width = this.Tip.offsetWidth + "px"; this._iframe.style.height = this.Tip.offsetHeight + "px"; this._iframe.style.display = ""; }; //触发方式隐藏 trigger.TouchHide && addEvent(this.Tip, "mouseout", this._fTH); }, //获取相对触发元素的left GetLeft: function(rect, align) { switch (align.toLowerCase()) { case "left" : return rect.left - this.Tip.offsetWidth; case "clientleft" : return rect.left; case "center" : return (rect.left + rect.right - this.Tip.offsetWidth)/2; case "clientright" : return rect.right - this.Tip.offsetWidth; case "right" : default : return rect.right; }; }, //获取相对触发元素的top GetTop: function(rect, valign) { switch (valign.toLowerCase()) { case "top" : return rect.top - this.Tip.offsetHeight; case "clienttop" : return rect.top; case "center" : return (rect.top + rect.bottom - this.Tip.offsetHeight)/2; case "clientbottom" : return rect.bottom - this.Tip.offsetHeight; case "bottom" : default : return rect.bottom; }; }, //准备隐藏 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._iframe.style.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 (trigger.ClickShow) { if (this.CheckShow(trigger)) { this.ReadyShow(trigger.ClickShowDelay); } else { clearTimeout(this._timer); }; }; })); //触发方式显示 addEvent(elem, "mouseover", BindAsEventListener(this, function(e){ if (trigger.TouchShow) { if (this.CheckShow(trigger)) { this.ReadyShow(trigger.TouchShowDelay); } 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; }; } };
[Ctrl+A 全部选择 然后拷贝]