JavaScript 浮動定位提示效果實現(xiàn)代碼
更新時間：2009年09月16日 16:21:51 作者：
本來想做一個集合浮動定位和鼠標跟隨的tooltips效果，但發(fā)現(xiàn)定位和鼠標跟隨在一些關(guān)鍵的地方還是不同的，還是分開來吧。
其中黑色框代表觸發(fā)元素，紅色框代表Tip。
一眼望去，要實現(xiàn)這么多的位置好像很復(fù)雜，這時要想找到最好的方法就要細心分析找出規(guī)律。
這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來充數(shù)。
下面說說如何獲取這些坐標的值，首先通過getBoundingClientRect要獲取觸發(fā)元素的坐標對象。
ps：關(guān)于getBoundingClientRect的介紹請看這里的元素位置。
再利用這個坐標對像，通過GetRelative.Left和GetRelative.Top來獲取水平和垂直坐標。
GetRelative.Left和GetRelative.Top里面都是些簡單的獲取坐標算法，具體請參考代碼。
使用時，把水平坐標和垂直坐標的標識值（字符）分別賦給觸發(fā)對象的Align和vAlign屬性，系統(tǒng)就會自動設(shè)置對應(yīng)的位置。
例如要設(shè)置位置14，那么Align設(shè)為"clientright"，vAlign設(shè)為"center"就可以了。
至于自定義定位就是在預(yù)設(shè)定位得到的坐標基礎(chǔ)上，根據(jù)CustomLeft和CustomTop的值再進行l(wèi)eft和top的修正。
自定義百分比定位是以觸發(fā)元素的寬和高為基準，根據(jù)PercentLeft和PercentTop取百分比：
if (options.PercentLeft) { iLeft += .01 * options.PercentLeft * relElem.offsetWidth; };
if (options.PercentTop) { iTop += .01 * options.PercentTop * relElem.offsetHeight; };
注意數(shù)值單位是0.01。
【自適應(yīng)定位】
自適應(yīng)定位的作用是當Tip顯示的范圍超過瀏覽器可視范圍的時候，自動修正到可視范圍里面。
因為上面通過getBoundingClientRect獲取的定位是以視窗為準的，所以可以直接通過clientWidth/clientHeight來判斷是否超過視窗范圍。
首先獲取最大left和top值：
var maxLeft = document.documentElement.clientWidth - fixedElem.offsetWidth,
maxTop = document.documentElement.clientHeight - fixedElem.offsetHeight;
最小值是0就不用計算了。
如果Reset屬性是true會使用重新定位的方法。
理想的效果是能自動從25個預(yù)設(shè)定位中找到適合的定位位置。
但這個需求實在變化太多，要全部實現(xiàn)估計要長長的代碼，程序僅僅做了簡單的修正：
if (iLeft > maxLeft || iLeft < 0) {
iLeft = GetRelative.Left(2 * iLeft > maxLeft ? "left" : "right") + options.CustomLeft;
};
if (iTop > maxTop || iTop < 0) {
iTop = GetRelative.Top(2 * iTop > maxTop ? "top" : "bottom") + options.CustomTop;
};
實際應(yīng)用的話估計要按需求重寫這部分才行。
如果不是用Reset重新定位，只需要根據(jù)這幾個值獲取適合的值就行了：
iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
iTop = Math.max(Math.min(iTop, maxTop), 0);
【參數(shù)設(shè)計】
程序中用ShowType、HideType、ShowDelayType和HideDelayType這幾個屬性來設(shè)置執(zhí)行方式的。
以ShowType顯示方式屬性為例，原來的方式是分兩個bool屬性ClickShowType和TouchShowType表示的。
這樣的好處是程序判斷方便，效率高，問題是使用不方便，感覺混亂。
為了減少參數(shù)數(shù)量，后來把屬性值改成字符形式，可以是以下4個值：
"click":只用點擊方式
"touch":只用觸發(fā)方式
"both":兩個都使用
"none":都不使用（其他字符值也當成是"none"）
這樣就可以把ClickShowType和TouchShowType合并成一個ShowType來表示了。
參數(shù)數(shù)量是減少了，但程序中就必須每次都要根據(jù)字符值判斷一下屬于哪個類型。
為了方便程序判斷，添加了IsClick和IsTouch方法，參數(shù)是上面的執(zhí)行方式屬性，用來判斷是否使用點擊和觸發(fā)方式。
例如IsClick是這樣的：
type = type.toLowerCase();
return type === "both" || type === "click";
這樣就間接把字符判斷變成bool判斷，只是代碼比直接bool判斷長了點。
【隱藏select】
又是ie6的隱藏select問題，這里用的是iframe遮蓋法。
首先初始化時插入iframe：
復(fù)制代碼 代碼如下:
var iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>");
document.body.insertBefore(iframe, document.body.childNodes[0]);
this._cssiframe = iframe.style;
在Show的時候，參照Tip設(shè)置好樣式，再顯示：
復(fù)制代碼 代碼如下:
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時隱藏就可以了。
使用說明
實例化時，第一個必要參數(shù)是Tip對象：
var ft = new FixedTips("idTip");
第二個可選參數(shù)用來設(shè)置觸發(fā)對象屬性的統(tǒng)一默認值。
然后用Add方法添加觸發(fā)對象：
var trigger1 = ft.Add("idTrigger1");
第二個可選參數(shù)用來設(shè)置該觸發(fā)對象屬性。
要添加多個觸發(fā)對象時只需繼續(xù)用Add添加就行了。
程序源碼
復(fù)制代碼 代碼如下:
var FixedTips = function(tip, options){
this.Tip = $$(tip);//提示框
this._trigger = null;//觸發(fā)對象
this._timer = null;//定時器
this._cssTip = this.Tip.style;//簡化代碼
this._onshow = false;//記錄當前顯示狀態(tài)
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";//避免占位出現(xiàn)滾動條
//offset修正參數(shù)
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對象時保持顯示狀態(tài)
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='position:absolute;filter:alpha(opacity=0);display:none;'>");
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));
};
});
//用于觸發(fā)方式隱藏
this._fTH = BindAsEventListener(this, function(e) {
if (this.Check(e.relatedTarget) && this.CheckHide()) {
this.ReadyHide(this.IsTouch(this._trigger.HideDelayType));
};
});
};
FixedTips.prototype = {
//設(shè)置默認屬性
SetOptions: function(options) {
this.options = {//默認值
ShowType: "both",//顯示方式
HideType: "both",//隱藏方式
ShowDelayType: "touch",//顯示延遲方式
HideDelayType: "touch",//隱藏延遲方式
//"click":只用點擊方式,"touch":只用觸發(fā)方式,"both":兩個都使用,"none":都不使用
ShowDelay: 300,//顯示延時時間
HideDelay: 300,//隱藏延時時間
Fixed: {},//定位對象
onShow: function(){},//顯示時執(zhí)行
onHide: function(){}//隱藏時執(zhí)行
};
Extend(this.options, options || {});
},
//檢查觸發(fā)元素
Check: function(elem) {
//返回是否外部元素（即觸發(fā)元素和Tip對象本身及其內(nèi)部元素以外的元素對象）
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;
//觸發(fā)方式隱藏
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();//放在前面方便修改屬性
//根據(jù)預(yù)設(shè)定位和自定義定位計算left和top
var trigger = this._trigger,
pos = GetRelative(trigger.Elem, this.Tip, trigger.Fixed),
iLeft = pos.Left, iTop = pos.Top;
//設(shè)置位置并顯示
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 = "";
};
//觸發(fā)方式隱藏
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);
//設(shè)置隱藏
this._cssTip.visibility = "hidden";
this._cssTip.left = this._cssTip.top = "-9999px";
//ie6處理select
if (isIE6) { this._cssiframe.display = "none"; };
//處理觸發(fā)對象
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);
},
//添加觸發(fā)對象
Add: function(elem, options) {
//創(chuàng)建一個觸發(fā)對象
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);
};
};
}));
//觸發(fā)方式顯示
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);
};
};
}));
//返回觸發(fā)對象
return trigger;
},
//顯示檢查
CheckShow: function(trigger) {
if ( trigger !== this._trigger ) {
//不是同一個觸發(fā)對象就先執(zhí)行Hide防止沖突
this.Hide(); this._trigger = trigger; return true;
} else { return false; };
},
//隱藏檢查
CheckHide: function() {
if ( this._cssTip.visibility === "hidden" ) {
//本來就是隱藏狀態(tài)，不需要再執(zhí)行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";
},
//是否觸發(fā)方式
IsTouch: function(type) {
type = type.toLowerCase();
return type === "both" || type === "touch";
}
};
打包下載
您可能感興趣的文章:
- javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單
- javascript跟隨滾動條滾動的層(浮動AD效果)
- JavaScript模擬下拉菜單代碼
- javascript 表格排序和表頭浮動效果(擴展SortTable)
- JavaScript 下拉菜單實現(xiàn)代碼
- JavaScript寫的一個自定義彈出式對話框代碼
- javascript 彈出層組件（升級版）
- 如何制作浮動廣告 JavaScript制作浮動廣告代碼
- JavaScript實現(xiàn)網(wǎng)頁上的浮動廣告的簡單方法
- javascript實現(xiàn)div浮動在網(wǎng)頁最頂上并帶關(guān)閉按鈕效果實例
- JavaScript彈出窗口方法匯總
- JavaScript基礎(chǔ)教程之a(chǎn)lert彈出提示框?qū)嵗?/a>
- javascript中字體浮動效果的簡單實例演示
