国产不卡av在线,六月丁香婷婷亚洲中文字幕,老司机精品99在线播放

　JavaScript 浮動(dòng)定位提示效果

作者：cloudgamer　時(shí)間： 2009-07-07　文檔類(lèi)型：原創(chuàng)　來(lái)自：藍(lán)色理想

第 1 頁(yè) JavaScript 浮動(dòng)定位提示效果 [1]
第 2 頁(yè) JavaScript 浮動(dòng)定位提示效果 [2]
第 3 頁(yè) JavaScript 浮動(dòng)定位提示效果 [3]
第 4 頁(yè) JavaScript 浮動(dòng)定位提示效果 [4]
第 5 頁(yè) JavaScript 浮動(dòng)定位提示效果 [5]
第 6 頁(yè) JavaScript 浮動(dòng)定位提示效果 [6]

本來(lái)想做一個(gè)集合浮動(dòng)定位和鼠標(biāo)跟隨的tooltips效果，但發(fā)現(xiàn)定位和鼠標(biāo)跟隨在一些關(guān)鍵的地方還是不同的，還是分開(kāi)來(lái)吧。
這個(gè)效果本身難度不大，主要在程序結(jié)構(gòu)和擴(kuò)展中下了些功夫，務(wù)求用起來(lái)更方便，能用在更多的地方。

程序特點(diǎn)

同一個(gè)提示框用在多個(gè)觸發(fā)元素時(shí)，只需一個(gè)實(shí)例；
顯示和隱藏分別有點(diǎn)擊方式和觸發(fā)方式選擇；
能設(shè)置延時(shí)顯示和隱藏；
有25種預(yù)設(shè)定位位置；
可在預(yù)設(shè)定位基礎(chǔ)上，再自定義定位；
可設(shè)置自適應(yīng)窗口定位；

完整實(shí)例下載(點(diǎn)擊下載)

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 浮動(dòng)定位提示效果</title> <script> var $$ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var isIE = navigator.userAgent.indexOf('MSIE') != -1; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == "6"); var isChrome = navigator.userAgent.indexOf('Chrome') != -1; var isSafari = navigator.userAgent.indexOf('AppleWebKit') != -1; // with input from Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else { if (!handler.$$guid) handler.$$guid = addEvent.guid++; if (!element.events) element.events = {}; var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; if (element["on" + type]) { handlers[0] = element["on" + type]; } } handlers[handler.$$guid] = handler; element["on" + type] = handleEvent; } }; addEvent.guid = 1; function removeEvent(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else { if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } } }; function handleEvent(event) { var returnValue = true; event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event); var handlers = this.events[event.type]; for (var i in handlers) { this.$$handleEvent = handlers[i]; if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue; }; function fixEvent(event) { event.target = event.srcElement; if(event.type == "mouseout") { event.relatedTarget = event.toElement; }else if(event.type == "mouseover") { event.relatedTarget = event.fromElement; } return event; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var Contains = function(a, b){ return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16); } var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments, 2); return function() { return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); } } var BindAsEventListener = function(object, fun) { var args = Array.prototype.slice.call(arguments, 2); return function(event) { return fun.apply(object, [event].concat(args)); } } var FixedTips = function(tip, options){ this.Tip = $$(tip);//提示框 this._trigger = null;//觸發(fā)對(duì)象 this._timer = null;//定時(shí)器 this._cssTip = this.Tip.style;//簡(jiǎn)化代碼 this._onshow = false;//記錄當(dāng)前顯示狀態(tài) this.SetOptions(options); //處理Tip對(duì)象 this._cssTip.margin = 0;//避免定位問(wèn)題 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)滾動(dòng)條 //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對(duì)象時(shí)保持顯示狀態(tài) addEvent(this.Tip, "mouseover", BindAsEventListener(this, function(e){ //如果是外部元素進(jìn)入，說(shuō)明當(dāng)前是隱藏延時(shí)階段，那么清除定時(shí)器取消隱藏 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]); }; //用于點(diǎn)擊方式隱藏 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,//簡(jiǎn)化代碼 //設(shè)置默認(rèn)屬性 SetOptions: function(options) { this.options = {//默認(rèn)值 ClickShow: true,//是否點(diǎn)擊方式顯示 ClickShowDelay: false,//是否點(diǎn)擊顯示延時(shí) ClickHide: true,//是否點(diǎn)擊方式隱藏 ClickHideDelay: false,//是否點(diǎn)擊隱藏延時(shí) TouchShow: true,//是否觸發(fā)方式顯示 TouchShowDelay: true,//是否觸發(fā)顯示延時(shí) TouchHide: true,//是否觸發(fā)方式隱藏 TouchHideDelay: true,//是否觸發(fā)隱藏延時(shí) ShowDelay: 300,//顯示延時(shí)時(shí)間 HideDelay: 300,//隱藏延時(shí)時(shí)間 Align: "clientleft",//水平方向定位 vAlign: "clienttop",//垂直方向定位 Custom: { left: 0, top: 0 },//自定義定位 Percent: { left: 0, top: 0 },//自定義百分比定位 Adaptive: false,//是否自適應(yīng)定位 Reset: false,//自適應(yīng)定位時(shí)是否重新定位 onShow: function(){},//顯示時(shí)執(zhí)行 onHide: function(){}//隱藏時(shí)執(zhí)行 }; Extend(this.options, options || {}); }, //檢查觸發(fā)元素 Check: function(elem) { //返回是否外部元素（即觸發(fā)元素和Tip對(duì)象本身及其內(nèi)部元素以外的元素對(duì)象） 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; //點(diǎn)擊方式隱藏 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è)定位和自定義定位計(jì)算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) { //自動(dòng)重新定位 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); }, //獲取相對(duì)觸發(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; }; }, //獲取相對(duì)觸發(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ā)對(duì)象 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ā)對(duì)象 Add: function(elem, options) { //創(chuàng)建一個(gè)觸發(fā)對(duì)象 var elem = $$(elem), trigger = Extend(Extend({ Elem: elem }, this.options), options || {}); //點(diǎn)擊方式顯示 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ā)對(duì)象 return trigger; }, //顯示檢查 CheckShow: function(trigger) { if (trigger !== this._trigger) { //不是同一個(gè)觸發(fā)對(duì)象就先執(zhí)行Hide防止沖突 this.Hide(); this._trigger = trigger; return true; } else { return false; }; }, //隱藏檢查 CheckHide: function() { if (this._cssTip.visibility === "hidden") { //本來(lái)就是隱藏狀態(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; }; } }; </script> </head> <body> <style> .trigger{border:1px solid #003099; color:#003099; background:#e2e7ff; padding:10px; width:200px; height:100px; margin-left:150px;} .tip{border:1px solid #c00000; color:#c00000; background:#ffcccc; padding:5px; line-height:20px;} </style> <div style="padding:50px;"> <div id="idTip" class="tip"></div> <div id="idTrigger1" class="trigger"> <select> <option>test</option> </select> </div> <br> 水平位置： <label> <input name="nAlign" type="radio" value="left" /> left </label> <label> <input name="nAlign" type="radio" value="clientleft" /> clientleft </label> <label> <input name="nAlign" type="radio" value="center" /> center </label> <label> <input name="nAlign" type="radio" value="clientright" /> clientright </label> <label> <input name="nAlign" type="radio" value="right" checked="checked" /> right </label> <br> 垂直位置： <label> <input name="nVAlign" type="radio" value="top" /> top </label> <label> <input name="nVAlign" type="radio" value="clienttop" /> clienttop </label> <label> <input name="nVAlign" type="radio" value="center" /> center </label> <label> <input name="nVAlign" type="radio" value="clientbottom" /> clientbottom </label> <label> <input name="nVAlign" type="radio" value="bottom" checked="checked" /> bottom </label> <br> <br> 自定義定位： left： <input id="idLeft" type="text" size="5" value="0" maxlength="3" /> top： <input id="idTop" type="text" size="5" value="0" maxlength="3"/> <br> <br> <input id="idClick" type="checkbox" checked="checked" /> <label for="idClick">點(diǎn)擊方式</label> <input id="idTouch" type="checkbox" checked="checked" /> <label for="idTouch">觸發(fā)方式</label> <br> <br> 延時(shí)時(shí)間： <input id="idDelayTime" type="text" size="5" value="0" maxlength="4"/> <input id="idDelay" type="button" value=" 取消延時(shí) " /> <br> <br> 其他應(yīng)用范例： <br> <br> <div id="idTest1"> 利用title： <a title="拖放效果">拖放效果</a>   <a title="拖拉縮放效果">拖拉縮放效果</a>   <a title="圖片切割效果"> 圖片切割效果</a> </div> <br> <br> 流行的頭像顯示效果： <br> <br> <div id="idTest2"> <a title="圖片滑動(dòng)切換效果"><img src="/articleimg/2009/07/6852/r_mx1.jpg" border="0"/></a>   <a title="圖片變換效果"><img src="/articleimg/2009/07/6852/r_mx2.jpg" border="0"/></a>   <a title="圖片滑動(dòng)展示效果"><img src="/articleimg/2009/07/6852/r_mx3.jpg" border="0"/></a> </div> <br> <br> 關(guān)閉按鈕：<a id="idTest3" >Table行定位效果</a> </div> <script> var forEach = function(array, callback, thisObject){ if(array.forEach){ array.forEach(callback, thisObject); }else{ for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); } } } ////////////////////////////////////// var ft = new FixedTips("idTip"); ////////////////////////////////////// var trigger1 = ft.Add("idTrigger1", { onShow: function(){ //定位測(cè)試 var sAlign = this.Align, sVAlign = this.vAlign; forEach(document.getElementsByName("nAlign"), function(o){ if(o.checked){ sAlign = o.value; } }); forEach(document.getElementsByName("nVAlign"), function(o){ if(o.checked){ sVAlign = o.value; } }); this.Align = sAlign; this.vAlign = sVAlign; this.Custom.left = $$("idLeft").value | 0; this.Custom.top = $$("idTop").value | 0; trigger1.ShowDelay = trigger1.HideDelay = $$("idDelayTime").value | 0 || 300; ft.Tip.innerHTML = sAlign + "<br>" + sVAlign + "<br>" + "left: " + this.Custom.left + ", top: " + this.Custom.top; } }); //延時(shí)測(cè)試 $$("idDelayTime").value = trigger1.ShowDelay; $$("idDelay").onclick = function(){ if(trigger1.TouchShowDelay){ trigger1.ClickShowDelay = trigger1.ClickHideDelay = trigger1.TouchShowDelay = trigger1.TouchHideDelay = false; $$("idDelayTime").disabled = true; this.value = " 設(shè)置延時(shí) "; }else{ trigger1.ClickShowDelay = trigger1.ClickHideDelay = trigger1.TouchShowDelay = trigger1.TouchHideDelay = true; $$("idDelayTime").disabled = false; this.value = " 取消延時(shí) "; } } //方式測(cè)試 $$("idClick").onclick = function(){ trigger1.ClickShow = trigger1.ClickHide = this.checked; } $$("idTouch").onclick = function(){ trigger1.TouchShow = trigger1.TouchHide = this.checked; } /////////////////////////////////////// forEach($$("idTest1").getElementsByTagName("a"), function(o){ var title = o.title; o.title = ""; ft.Add(o, { vAlign: "bottom", Percent: { left: 50, top: 0 }, onShow: function(){ ft.Tip.innerHTML = title; } }); }) /////////////////////////////////////// forEach($$("idTest2").getElementsByTagName("a"), function(o){ var img = o.getElementsByTagName("img")[0], title = o.title; o.title = ""; ft.Add(img, { Custom: { left: -6, top: -6 }, onShow: function(){ var str = '<a href="' + o.href + '"><img src="' + img.src + '" style="padding-bottom:5px;" border="0"/></a>'; str += '<br /><a href="' + o.href + '">' + title + '</a>'; ft.Tip.innerHTML = str; } }); }) /////////////////////////////////////// ft.Add("idTest3", { ClickHide: false, TouchHide: false, Align: "right", onShow: function(){ var str = '<a >顏色梯度和漸變效果</a><br />'; str += '<a >仿163網(wǎng)盤(pán)無(wú)刷新文件上傳系統(tǒng)</a><br />'; str += '<input type="button" onclick="ft.Hide();" value="點(diǎn)擊關(guān)閉" />'; ft.Tip.innerHTML = str; } }); </script> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

JavaScript,定位,浮動(dòng),提示,tooltips,FixedTips,Tip
程序說(shuō)明

Tip對(duì)象：

Tip對(duì)象就是用來(lái)顯示提示信息的容器，程序用Tip屬性表示。這個(gè)沒(méi)什么要求，程序初始化時(shí)會(huì)對(duì)它進(jìn)行一些設(shè)置。
首先進(jìn)行下面設(shè)置：

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

其中margin設(shè)為0是為了避免一些定位問(wèn)題，用visibility來(lái)隱藏而不是display是因?yàn)槌绦蛐枰@取Tip的offsetWidth、offsetHeight，還需要設(shè)置left和top是避免因Tip占位出現(xiàn)的滾動(dòng)條。
因?yàn)門(mén)ip可能會(huì)在其他定位元素里面，所以還要設(shè)兩個(gè)offset修正參數(shù)：

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

最后給Tip的mouseover加一個(gè)事件，具體后面再說(shuō)明。

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

上一頁(yè) 下一頁(yè) JavaScript 浮動(dòng)定位提示效果 [2]

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

相關(guān)文章

更多相關(guān)鏈接

給JavaScript新手的24條實(shí)用建議

利用PS輕松打造極地全景特效

JavaScript優(yōu)化細(xì)節(jié)

JavaScript 實(shí)現(xiàn) Konami Code

jQuery性能優(yōu)化指南

作者文章

JavaScript 顏色梯度和漸變效果

JavaScript Tween算法及緩動(dòng)效果

仿Apple滑動(dòng)條(拖動(dòng))產(chǎn)品展示效果

JavaScript 圖片切割效果

JavaScript 拖放效果分析


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門(mén)搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開(kāi)啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買(mǎi)真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛(ài)的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開(kāi)發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

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