打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
javascript设置DIV位置

<div id="myDIV" style="z-index: 9999999; position: absolute; display: none; height: 210px;width350px">

<table>

            <tr style="height: 25px">

                <td class="ModiHead" align="center">

                    各阶段版本信息</td>

            </tr>

            <tr style="height: 100%">

                <td>

                    <div style="visibility: inherit; overflow: auto; width: 100%; height: 100%">

                        <iframe frameborder="0" id="VersionFrame" src="" style="border: 0px; height: 100%;

                            width: 100%;"></iframe>

                    </div>

                </td>

            </tr>

            <tr style="height: 25px">

                <td class="ModiHead" align="center">

                    <a style="cursor: hand" onclick="javascript :document.all[‘myDIV‘].style.display=‘none‘;">

                        关 闭</a></td>

            </tr>

        </table>

 

 

/*显示DIV*/

function showDIV()

{

    /*获取当前鼠标左键按下后的位置,据此定义DIV显示的位置*/

    var leftedge    = document.body.clientWidth-event.clientX;

    var bottomedge  = document.body.clientHeight-event.clientY;

   

    /*如果从鼠标位置到窗口右边的空间小于DIV的宽度,就定位DIV的左坐标(Left)为当前鼠标位置向左一个DIV宽度*/

    if (leftedge < myDIV.offsetWidth)

    {

        myDIV.style.left = document.body.scrollLeft + event.clientX - myDIV.offsetWidth;

    }

    else

    {

        /*否则,就定位DIV的左坐标为当前鼠标位置*/

        myDIV.style.left = document.body.scrollLeft + event.clientX;

    }

   

   

    /*如果从鼠标位置到窗口下边的空间小于DIV的高度,就定位DIV的上坐标(Top)为当前鼠标位置向上一个DIV高度*/

    if (bottomedge < myDIV.offsetHeight)

    {

        myDIV.style.top = document.body.scrollTop + event.clientY - myDIV.offsetHeight;

    }

    else

    {

        /*否则,就定位DIV的上坐标为当前鼠标位置*/

        myDIV.style.top = document.body.scrollTop + event.clientY;

    }

   

    /*设置DIV可见*/       

    myDIV.style.display = "block";

   

    return false;

}

 



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1565154

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
360图书馆的顶图
JavaScript页面内拖拽原理分析
非常实用的弹窗特效代码
Html框架结构下的页面跳转
边框效果
Jquery增删数据
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服