JavaScript 浮动定位提示效果 - 网页制作

　JavaScript 浮动定位提示效果

作者：cloudgamer　时间： 2009-07-07　文档类型：原创　来自：蓝色理想

第 1 页 JavaScript 浮动定位提示效果 [1]
第 2 页 JavaScript 浮动定位提示效果 [2]
第 3 页 JavaScript 浮动定位提示效果 [3]
第 4 页 JavaScript 浮动定位提示效果 [4]
第 5 页 JavaScript 浮动定位提示效果 [5]
第 6 页 JavaScript 浮动定位提示效果 [6]

本来想做一个集合浮动定位和鼠标跟随的tooltips效果，但发现定位和鼠标跟随在一些关键的地方还是不同的，还是分开来吧。
这个效果本身难度不大，主要在程序结构和扩展中下了些功夫，务求用起来更方便，能用在更多的地方。

程序特点

同一个提示框用在多个触发元素时，只需一个实例；
显示和隐藏分别有点击方式和触发方式选择；
能设置延时显示和隐藏；
有25种预设定位位置；
可在预设定位基础上，再自定义定位；
可设置自适应窗口定位；

完整实例下载(点击下载)

运行代码框
<!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 浮动定位提示效果</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;//触发对象 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; }; } }; </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">点击方式</label> <input id="idTouch" type="checkbox" checked="checked" /> <label for="idTouch">触发方式</label> <br> <br> 延时时间： <input id="idDelayTime" type="text" size="5" value="0" maxlength="4"/> <input id="idDelay" type="button" value=" 取消延时 " /> <br> <br> 其他应用范例： <br> <br> <div id="idTest1"> 利用title： <a href="http://www.cnblogs.com/cloudgamer/archive/2008/11/17/1334778.html" title="拖放效果">拖放效果</a>   <a href="http://www.cnblogs.com/cloudgamer/archive/2008/12/03/1346386.html" title="拖拉缩放效果">拖拉缩放效果</a>   <a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/21/1247267.html" title="图片切割效果"> 图片切割效果</a> </div> <br> <br> 流行的头像显示效果： <br> <br> <div id="idTest2"> <a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html" title="图片滑动切换效果"><img src="/articleimg/2009/07/6852/r_mx1.jpg" border="0"/></a>   <a href="http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html" title="图片变换效果"><img src="/articleimg/2009/07/6852/r_mx2.jpg" border="0"/></a>   <a href="http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html" title="图片滑动展示效果"><img src="/articleimg/2009/07/6852/r_mx3.jpg" border="0"/></a> </div> <br> <br> 关闭按钮：<a id="idTest3" href="http://www.cnblogs.com/cloudgamer/archive/2009/05/18/TableFixed.html">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(){ //定位测试 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; } }); //延时测试 $$("idDelayTime").value = trigger1.ShowDelay; $$("idDelay").onclick = function(){ if(trigger1.TouchShowDelay){ trigger1.ClickShowDelay = trigger1.ClickHideDelay = trigger1.TouchShowDelay = trigger1.TouchHideDelay = false; $$("idDelayTime").disabled = true; this.value = " 设置延时 "; }else{ trigger1.ClickShowDelay = trigger1.ClickHideDelay = trigger1.TouchShowDelay = trigger1.TouchHideDelay = true; $$("idDelayTime").disabled = false; this.value = " 取消延时 "; } } //方式测试 $$("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 href="http://www.cnblogs.com/cloudgamer/archive/2009/03/11/1408333.html">颜色梯度和渐变效果</a><br />'; str += '<a href="http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html">仿163网盘无刷新文件上传系统</a><br />'; str += '<input type="button" onclick="ft.Hide();" value="点击关闭" />'; ft.Tip.innerHTML = str; } }); </script> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

JavaScript,定位,浮动,提示,tooltips,FixedTips,Tip
程序说明

Tip对象：

Tip对象就是用来显示提示信息的容器，程序用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";

其中margin设为0是为了避免一些定位问题，用visibility来隐藏而不是display是因为程序需要获取Tip的offsetWidth、offsetHeight，还需要设置left和top是避免因Tip占位出现的滚动条。
因为Tip可能会在其他定位元素里面，所以还要设两个offset修正参数：

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加一个事件，具体后面再说明。

出处：蓝色理想
责任编辑：bluehearts

上一页下一页 JavaScript 浮动定位提示效果 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

更多相关链接

给JavaScript新手的24条实用建议

利用PS轻松打造极地全景特效

JavaScript优化细节

JavaScript 实现 Konami Code

jQuery性能优化指南

作者文章

JavaScript 颜色梯度和渐变效果

JavaScript Tween算法及缓动效果

仿Apple滑动条(拖动)产品展示效果

JavaScript 图片切割效果

JavaScript 拖放效果分析


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule