$(获取到需要弹出浮动框的元素obj).hover(function () {
//鼠标移动时
//获取到需要弹出浮动框的元素obj
divobj = document.getElementById(obj);
//获取obj的位置,left及top,IE及FF3.0以上都支持
divobjleft = divobj.getBoundingClientRect().left;
divobjtop = divobj.getBoundingClientRect().top;
//为弹出的div的left,top赋值
divobjx = divobjleft + 0 /* 弹出的div距离obj左边的距离,取实际值 */;
divobjy = divobjtop + 50 /* 弹出的div距离obj顶部的距离,取实际值 */;
// 定义弹出div
var x = "<div id='description' class='help' style='left:" + divobjx + "px; top:" + divobjy + "px;'>这里是内容,也可以通过参数来传递</div>";
//通过insertAdjacentHTML来写入到html内(这个参数火狐不支持,但是可能通过兼容代码 让火狐兼容insertAdjacentHTML 属性,兼容代码不长,就几十行)
document.body.insertAdjacentHTML("afterBegin", x);
}, function () {
//鼠标移出时,通过closeDiv()移除这个div
closeDiv("description");
})
/* Sart 移除元素方法 */
function closeDiv(obj) {
var divobj = document.getElementById(obj);
divobj.parentNode.removeChild(divobj);
}
/* End移除元素方法 */
/* Start 兼容代码 让火狐兼容insertAdjacentHTML 属性 */
if (typeof HTMLElement != "undefined" && !HTMLElement.prototype.insertAdjacentElement) {
HTMLElement.prototype.insertAdjacentElement = function (where, parsedNode) {
switch (where) {
case "beforeBegin":
this.parentNode.insertBefore(parsedNode, this);
break;
case "afterBegin":
this.insertBefore(parsedNode, this.firstChild);
break;
case "beforeEnd":
this.appendChild(parsedNode);
break;
case "afterEnd":
if (this.nextSibling) {
this.parentNode.insertBefore(parsedNode, this.nextSibling);
} else {
this.parentNode.appendChild(parsedNode);
}
break;
}
};
HTMLElement.prototype.insertAdjacentHTML = function (where, htmlStr) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where, parsedHTML);
};
HTMLElement.prototype.insertAdjacentText = function (where, txtStr) {
var parsedText = document.createTextNode(txtStr);
this.insertAdjacentElement(where, parsedText);
};
}
/* End 兼容代码 让火狐兼容insertAdjacentHTML 属性 */
详细解决方案
jquery统制css绝对定位位置效果,例如鼠标移动到图标显示层显示相关信息
热度:26 发布时间:2012-09-18 16:21:42.0
相关解决方案
- jquery 获取jsp页面的id解决方法
- jquery,二维数组取值。解决办法
- 求jquery.form.js+jquery.validate.min.js 用ajax提交表单的代码范例
- jquery 提交form表单不用插件的那种 如何提交
- jquery ajax回传没有值,该怎么处理
- jquery easyUI datagrid struts2有关问题
- jquery form 有关问题
- springmvc jquery ajax 提交复杂对象,415异常解决办法
- 应用Struts2 与 jquery,ajax验证用户注册,不用从数据库获取数据
- jquery ajax select解决方法
- jquery ajax返回值的有关问题
- jquery 的bind里面能不能获得返回值呢? 对小弟我很难的有关问题啊
- java+jquery easy ui + json + struts分页例子
- jquery easyui分页效率有关问题
- jquery 如何获得动态添加后的子元素个数?
- 关于Struts2 jQuery Plugin的 Result,该如何处理
- Jquery 点击按钮实现图片翻页,该如何解决
- Jquery+json解决思路
- jquery post有关问题
- 求大神解决偏题 - jquery ajax
- jquery ui taps有关问题,求解!
- jquery easyui 如何设置标题列居左,里面的数据列居右
- jquery 表格插件tablesorter的表头有多行和colspan不能排序有关问题
- jquery-easyui中的datetimebox 哪位高手用过?如何改变日期格式?
- jquery easyui treegrid 级联勾选跟点击行不自动勾选checkbox
- jquery.load(*json) 解析不已。求帮忙
- jquery 获取某列的值,该如何处理
- jquery 如何实现自动填充···求解···
- jquery-easyui datagrid ie不支持怎么处理?
- jQuery.get()的回调函数不执行,应用了struts2,spring解决方案