• 鼠标点击位置弹出DIV


             今日帮同事调页面脚本的时候碰到了一个要在鼠标点击位置弹出DIV,说实话,对于弹出层的控制上了解并不多,不过呢既然答应了还是要解决问题的。没办法了,只能硬着头皮上,先是了解了一下弹出层的原理,以前只是用现成的,却从来没去细想过研究,如今一琢磨,发现也挺有意思的。

           废话不多说了,先把代码整上来,有什么不对的地方还是请大家指教。



    /// <summary>
    /// 光标位置显示弹出层
    /// </summary>
    /// <param name="C_id">鼠标点击对象ID</param>
    /// <param name="D_id">弹出层对象ID</param>
    function D_Show(C_id,D_id) {
        //D_top : 弹出层的top属性(单位:px) D_left : 弹出层的left属性(单位:px)  P_heiht : 当前网页的高度  P_width : 当前网页的宽度
        //C_top : 鼠标点击对象的top属性      C_left : 鼠标点击对象的left属性       C_heigth : 鼠标点击对象的高度  C_width : 鼠标点击对象的宽度
        //C_obj : 鼠标点击对象  D_obj :弹出层对象  D_height :弹出层对象高度   D_width :弹出层对象宽度
        var D_top,D_left,P_heiht,P_width,C_top,C_left,C_heigth,C_width,C_obj,D_obj,D_height,D_width;

        //鼠标点击对象
        C_obj=$("#"+C_id);    
        //要显示的弹出层对象
        D_obj=$("#"+D_id);
        
        //取得弹出层高度
        D_height=D_obj.height();    
        //取得弹出层宽度
        D_width=D_obj.width();
           
        //取得鼠标点击对象高度
        C_heigth = C_obj.height();    
        //取得鼠标点击对象宽度
        C_width = C_obj.width();
       
        //取得当前页面高度
        P_heiht = pageHeight();    
        //取得当前页面宽度
        P_width = pageWidth();
           
        var offset = C_obj.offset();
        //取得鼠标点击对象top属性
        C_top = offset.top;
        //取得鼠标点击对象left属性
        C_left = offset.left;
        
        //计算弹出层的top属性值
        if(P_heiht-(C_top+C_heigth+D_height)>=0) {
            D_top=C_top+C_heigth;        
        }
        else {
            D_top = C_top-D_height;        
        }    
        D_top=D_top+"px";
        
        //计算弹出层的left属性值    
        if(P_width-(C_left+D_width)>=0) {
            D_left=C_left;
        }
        else {
            if(D_width>=C_width) {
                D_left=C_left-(D_width-C_width);
            }
            else {
                D_left=C_left+C_width;
            }        
        }
        D_left=D_left+"px";
        
        D_obj.css({top:D_top,left:D_left,position:"absolute",visibility:"visible",display:"block"});
    };

    /// <summary>
    /// 隐藏弹出层
    /// </summary>
    /// <param name="D_id">弹出层ID</param>
    function D_Clost(D_id){
        $("#"+D_id).css("display","none");
    }

    //返回当前网页高度
    function pageHeight() {
        if($.browser.msie) {
            return document.compatMode=="CSS1Compat"?document.documentElement.scrollHeight:
                document.body.clientHeight;
        }
        else {
            return self.innerHeight;
        }
    };

    //返回当前网页宽度
    function pageWidth() {
        if($.browser.msie) {
            return document.compatMode=="CSS1Compat"?document.documentElement.scrollWidth:
                document.body.clientWidth;
        }
        else {
            return self.innerWidth;
        }
    };

    //返回当前浏览器高度
    function browserHeight() {
        if($.browser.msie) {
            return document.compatMode=="CSS1Compat"?document.documentElement.clientHeight:
                document.body.clientHeight;
        }
        else {
            return self.innerHeight;
        }
    };

    //返回当前浏览器宽度
    function browserWidth() {
        if($.browser.msie) {
            return document.compatMode=="CSS1Compat"?document.documentElement.clientWidth:
                document.body.clientWidth;
        }
        else {
            return self.innerWidth;
        }
    }; 

  • 相关阅读:
    javaapplicationWeb application setup on Ubuntu VPS
    内容中断随想录(risc cpu的那些事)
    算法线性编程珠玑读书笔记之----->使用线性算法求解连续子序列的最大和
    classnull100
    安装javaUbuntu下安装JDK1.6,并将之设为默认的JDK
    筛选实现C++实现筛选法
    调试设置移动端Web开发环境搭建实践
    路由器交换机[置顶] 路由器和交换机的综合实验⑵
    卡数字怀念的东西:魔方
    密码配置配置SSH免密码登陆
  • 原文地址:https://www.cnblogs.com/mahongbo/p/1800321.html
Copyright © 2020-2023  润新知