中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

自適應(yīng)定位：

自適應(yīng)定位的作用是當(dāng)Tip顯示的范圍超過瀏覽器可視范圍的時候，自動修正到可視范圍里面。
因為上面通過getBoundingClientRect獲取的定位是以視窗為準(zhǔn)的，所以可以直接通過clientWidth/clientHeight來判斷是否超過視窗范圍。
首先獲取最大left和top值：

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

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

如果Reset屬性是true會使用重新定位的方法。
理想的效果是能自動從25個預(yù)設(shè)定位中找到適合的定位位置。
但這個需求實在變化太多，要全部實現(xiàn)估計要長長的代碼，程序僅僅做了簡單的修正：

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;
};

實際應(yīng)用的話估計要按需求重寫這部分才行。

如果不是用Reset重新定位，只需要根據(jù)這幾個值獲取適合的值就行了：

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設(shè)置好樣式，再顯示：

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時隱藏就可以了。

使用說明

實例化時，第一個必要參數(shù)是Tip對象：

var ft = new FixedTips("idTip");

第二個可選參數(shù)用來設(shè)置觸發(fā)對象屬性的統(tǒng)一默認(rèn)值。

然后用Add方法添加觸發(fā)對象：

var trigger1 = ft.Add("idTrigger1");

第二個可選參數(shù)用來設(shè)置該觸發(fā)對象屬性。

要添加多個觸發(fā)對象時只需繼續(xù)用Add添加就行了。

程序源碼：

代碼拷貝框
var FixedTips = function(tip, options){ this.Tip = $$(tip);//提示框 this._trigger = null;//觸發(fā)對象 this._timer = null;//定時器 this._cssTip = this.Tip.style;//簡化代碼 this._onshow = false;//記錄當(dāng)前顯示狀態(tài) 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";//避免占位出現(xiàn)滾動條 //offset修正參數(shù) 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對象時保持顯示狀態(tài) addEvent(this.Tip, "mouseover", BindAsEventListener(this, function(e){ //如果是外部元素進入，說明當(dāng)前是隱藏延時階段，那么清除定時器取消隱藏 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); }; }); //用于觸發(fā)方式隱藏 this._fTH = BindAsEventListener(this, function(e) { if (this.Check(e.relatedTarget) && this.CheckHide()) { this.ReadyHide(this._trigger.TouchHideDelay); }; }); }; FixedTips.prototype = { _doc: document.documentElement,//簡化代碼 //設(shè)置默認(rèn)屬性 SetOptions: function(options) { this.options = {//默認(rèn)值 ClickShow: true,//是否點擊方式顯示 ClickShowDelay: false,//是否點擊顯示延時 ClickHide: true,//是否點擊方式隱藏 ClickHideDelay: false,//是否點擊隱藏延時 TouchShow: true,//是否觸發(fā)方式顯示 TouchShowDelay: true,//是否觸發(fā)顯示延時 TouchHide: true,//是否觸發(fā)方式隱藏 TouchHideDelay: true,//是否觸發(fā)隱藏延時 ShowDelay: 300,//顯示延時時間 HideDelay: 300,//隱藏延時時間 Align: "clientleft",//水平方向定位 vAlign: "clienttop",//垂直方向定位 Custom: { left: 0, top: 0 },//自定義定位 Percent: { left: 0, top: 0 },//自定義百分比定位 Adaptive: false,//是否自適應(yīng)定位 Reset: false,//自適應(yīng)定位時是否重新定位 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) ); }, //準(zhǔn)備顯示 ReadyShow: function(delay) { clearTimeout(this._timer); var trigger = this._trigger; //點擊方式隱藏 trigger.ClickHide && addEvent(document, "click", this._fCH); //觸發(fā)方式隱藏 trigger.TouchHide && addEvent(this._trigger.Elem, "mouseout", this._fTH); //是否延遲觸發(fā) 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, 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; }; //自適應(yīng)視窗定位 if (trigger.Adaptive) { //修正定位參數(shù) 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); }; }; //設(shè)置位置并顯示 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 = ""; }; //觸發(fā)方式隱藏 trigger.TouchHide && addEvent(this.Tip, "mouseout", this._fTH); }, //獲取相對觸發(fā)元素的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; }; }, //獲取相對觸發(fā)元素的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; }; }, //準(zhǔn)備隱藏 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._iframe.style.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 (trigger.ClickShow) { if (this.CheckShow(trigger)) { this.ReadyShow(trigger.ClickShowDelay); } else { clearTimeout(this._timer); }; }; })); //觸發(fā)方式顯示 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); }; }; })); //返回觸發(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; }; } };
[Ctrl+A 全部選擇 然后拷貝]

完整實例下載(點擊下載)

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2937700-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2009/6852.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 JavaScript 浮動定位提示效果 [5] 下一頁

◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。