QQ邮箱在删除邮件时,那个浮动提示层很方便。
为此,我写了一个鼠标移动时修改坐标,这样随时可以弹出该位置的提示层的方法。
改进了一下,如果刚打开页面也要浮动提示,这时候也需要坐标,鼠标位置坐标按照顶层坐标给。
如下:
var globalObj = { timer: {}, mouse_pos: { x: 0, y: 0 }, top_pos: { x: 0, y: 0 }, getMousePosition: function(ev) { ev = ev || window.event; if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } if (!ev.clientX) return this.getTopPosition(); return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; }, getTopPosition: function() { return { x: document.body.scrollLeft + document.body.clientWidth / 2, y: document.body.scrollTop - document.body.clientTop }; }, GetPoint: function(ev) { var p = this.getMousePosition(ev); this.mouse_pos.x = p.x; this.mouse_pos.y = p.y; p = this.getTopPosition(); this.top_pos.x = p.x; this.top_pos.y = p.y; }, showHtmlTipAboveMouse: function(html_tip, time, id) { var pos = { x: this.mouse_pos.x, y: this.mouse_pos.y - 30 }; if (pos.y < 0) pos.y = 0; if (pos.x < 0) pos.x = 0; if (!id) id = 'showHtmlTipAboveMouse'; this.showHtmlTip(html_tip, pos, time, id); }, showHtmlTipOnTop: function(html_tip, time, id) { var pos = { x: this.top_pos.x, y: this.top_pos.y }; if (!id) id = 'showHtmlTipOnTop'; this.showHtmlTip(html_tip, pos, time, id); }, showHtmlTip: function(html_tip, pos, time, id) { if (!id) id = 'showHtmlTip'; $('#' + id).remove(); if (!time) time = 1; else time = parseInt(time); var dom = $('<div id="'+id+'"></div>').html(html_tip).css({ 'height': '20px', 'line-height': '20px', 'font-size': '12px', 'padding': '2px 10px', 'border': 'solid 1px #A8FF24', 'position': 'absolute', 'background': '#00A600', 'margin': '0px', 'display': 'none', 'color': '#fff', 'opacity': '1.0' }); $('body').append(dom); var left = pos.x - dom.width() / 2; var top = pos.y; dom.css({ display: '', top: top + 'px', left: left + 'px' }); if (this.timer[id]) { clearTimeout(this.timer[id]); this.timer[id] = null; } this.timer[id] = setTimeout(function() { dom.fadeOut(); }, (time * 1000)); } } $(function() { globalObj.GetPoint(); globalObj.showHtmlTipAboveMouse('Mouse浮动提示层---------------------------------------------'); globalObj.showHtmlTipOnTop('Top浮动提示层'); $(document).mousemove(function(ev) { setTimeout(function() { globalObj.GetPoint(ev); }, 200); }); $('#main_div').click(function() { globalObj.showHtmlTipAboveMouse('Mouse浮动提示层'); globalObj.showHtmlTipOnTop('Top浮动提示层'); }); });
附件中就是代码。
需要jquey的支持。