zoukankan      html  css  js  c++  java
  • 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 属性 */    
    

  • 相关阅读:
    linux通过源码安装nodejs
    设置npm的镜像源
    ubuntu手动安装PhantomJS
    h2数据库的简单使用
    xampp启动失败 Apache shutdown unexpectedly
    phpqrcode实现二维码(含图片)
    php 使用 rabbitmq
    rabbitMQ linux安装
    rabbitmq的web管理界面无法使用guest用户登录
    linux安装使用xdebug
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234440.html
Copyright © 2011-2022 走看看