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的支持。
相关推荐
页面的js中通过ymPrompt.setDefaultCfg(cfg)方法修改组件部分或全部的默认属性。 如:ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'}) 组件的默认配置(对于没有设定的项将采用该配置项的默认值...
Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置浮动效果 滑动弹出效果 会员...
49:破SP2弹窗24小时弹一次下载 50:定时关闭的背投广告代码下载 51:仿GG和百度的文字浮动广告下载 52:绕过XP关闭弹出代码下载 53:关闭弹出两窗口的代码下载 54:鼠标经过即弹出广告代码下载 55:按钮跳出广告代码...
通用jQuery对话框dialog或popup弹出层或提示窗口插件下载 6)工具提示 1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip...
JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及...
使用单击或鼠标悬停打开弹出窗口。 指定弹出框的方向-顶部,底部,左侧,右侧。 确定是要通过单击还是在鼠标光标离开弹出区域时关闭弹出窗口。 带有盒子阴影,三角形尖头和浮动效果。用法加载AngularJS之后包括...
12_3.htm 浮动顶部的菜单。 12_4.htm 浮动底部的菜单。 12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景图片。 13_3.htm 随机显示的...
49:破SP2弹窗24小时弹一次下载 50:定时关闭的背投广告代码下载 51:仿GG和百度的文字浮动广告下载 52:绕过XP关闭弹出代码下载 53:关闭弹出两窗口的代码下载 54:鼠标经过即弹出广告代码下载 55:按钮跳出广告代码...
先从左侧布局设置选项卡拖动行列布局样式到右侧容器, 然后将基础组件拖到右侧容器内, 通过拖动完成排布, 部分组件通过右上角浮动按钮提供样式切换, 你也可以点击组件内的文字部分启用即时编辑功能, 如果鼠标左键触发...
以 醒目 的方式表现出文本 语法: 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 属性: 1、align 文本的水平对齐方式 取值:left / center / right 4、段落元素 语法:<p></p> 属性:...
8、微语页的站长名字加了解码特效,鼠标悬停或移动文字处,头像出现720度旋转动画效果。正文为16号字体、回复14号字体,这样看起来更舒服、更美观。 9、更换了侧边栏顶部的小图标,所有图标皆是精挑细选的。 10、...