日期:2014-05-17  浏览次数:20571 次

jquery控制css绝对定位位置效果,例如鼠标移动到图标显示层显示相关信息
        $(获取到需要弹出浮动框的元素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 属性 */