moveable layer

最新推荐文章于 2024-08-21 08:36:20 发布

dayun

最新推荐文章于 2024-08-21 08:36:20 发布

阅读量517

点赞数

分类专栏： java&WEB应用文章标签： layer function filter div xhtml javascript

java&WEB应用专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div Move Temp</title>
<style type="text/css">
body{
background-image:url(http://mxd.sdo.com/web2005/download/image/wall_0201.jpg);
}
#InfoKuang {
    position:absolute;
    width:130px;
    height:85px;
    z-index:1;
    filter:alpha(Opacity=60,style=0);
    opacity:0.6;
    padding: 3px;
    border: 1px dashed #000000;
    z-index:5000;
    bottom:31px;
                font-size:9pt;



}
#InfoKuang ul {
    margin: 1px;
    padding: 0px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    color: #000000;
    background-color:#0faead;
}
#InfoKuang li {
    height:24px;
    padding: 1px;
    line-height: 24px;
}
</style>
<script language="javascript" type="text/javascript">
//通用移动 Div 类

function Tong_MoveDiv()
{
    //参数说明
    // id 要移动的层ID
    // Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
    // T 为 int 有数字是拖动没有是变大小
    this.Move=function(Id,Evt,T)
    {
        if(Id=="") return;
        var o = document.getElementById(Id);
        if(!o) return;//如果这个东东不在
        evt = Evt ? Evt : window.event;
        o.style.position = "absolute";//设定他的样式为绝对定位
        o.style.zIndex = 200;//这里显示上下的
        var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素使它在FF中也可以用
        //得到当前对要移动对象的坐标
        var w = o.offsetWidth;
        var h = o.offsetHeight;
        var l = o.offsetLeft;
        var t = o.offsetTop;
        var div = document.createElement("DIV");//新原素DIV
        document.body.appendChild(div);
        div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;

top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter；注意opacity 是FF中的 Opacity
        div.setAttribute("id", Id +"temp");

        if(T)//看看是拖动还是变大小
        {
            this.Move_OnlyMove(Id,evt);
        }
        else
        {

        }
    }

    //移动函数
    //参数 Id 要移动的层ID
    //Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
    this.Move_OnlyMove = function(Id,Evt)
    {
        var o = document.getElementById(Id+"temp");
        if(!o) return;
        evt = Evt?Evt:window.event;//都是FF 才要这么写的
        var relLeft = evt.clientX - o.offsetLeft;//得到左边的宽度
        var relTop = evt.clientY - o.offsetTop;//得到上边的宽度
        //抓取事件
        if (!window.captureEvents)
        {
            o.setCapture(); //指定抓取事件

        }
        else
        {
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
        }

        //文档的 onmousemove 事件
        document.onmousemove = function(e)
        {
            if (!o) return;
            e = e ? e : window.event;
            if (e.clientX - relLeft <= 0)
                o.style.left = 0 +"px";
            else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)
                o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";
            else
                o.style.left = e.clientX - relLeft +"px";
            if (e.clientY - relTop <= 1)
                o.style.top = 1 +"px";
            else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)
                o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";
            else
                o.style.top = e.clientY - relTop +"px";
        }

        //文档的 onmouseup 事件
        document.onmouseup = function()
        {
            if (!o) return;
            if (!window.captureEvents)
                o.releaseCapture();
            else
                window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            var o1 = document.getElementById(Id);
            if (!o1) return;
            var l0 = o.offsetLeft;
            var t0 = o.offsetTop;
            var l = o1.offsetLeft;
            var t = o1.offsetTop;
            MyMove.Move_e(Id, l0 , t0, l, t);
            document.body.removeChild(o);
            o = null;
        }
    }

    this.Move_e = function(Id, l0 , t0, l, t)
    {
        if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);
        var o = document.getElementById(Id);
        if (!o) return;
        var sl = st = 8;
        var s_l = Math.abs(l0 - l);
        var s_t = Math.abs(t0 - t);
        if (s_l - s_t > 0)
            if (s_t)
                sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;
            else
                sl = 0;
        else
            if (s_l)
                st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;
            else
                st = 0;
        if (l0 - l < 0) sl *= -1;
        if (t0 - t < 0) st *= -1;
        if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
        if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
        if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
        if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
        if (s_l == 0 && s_t == 0) return;
        if (Math.abs(l + sl - l0) < 2)
            o.style.left = l0 +"px";
        else
            o.style.left = l + sl +"px";
        if (Math.abs(t + st - t0) < 2)
            o.style.top = t0 +"px";
        else
            o.style.top = t + st +"px";
        window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1);
    }


}
var MyMove = new Tong_MoveDiv();
</script>
</head>
<body>
<div id="InfoKuang" οnmοusedοwn="MyMove.Move('InfoKuang',event,1)">
<span style="cursor:move;">点我调用拖动窗口</span>
    <ul>
        <li>

        </li>
    </ul>
    <ul>
        <li>
        显示窗口
        </li>
    </ul>
    <ul>
        <li>
        最大化窗口
        </li>
    </ul>
</div>
</body>
</html>

dayun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
moveable layer

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Div Move Tempbody{background-image:url(http://mxd.sdo.com/web2005/download/image/wall_0201.jpg);}#InfoKuang {
复制链接

扫一扫

专栏目录