iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

浏览数：28 / 时间：2015年06月11日

<!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>iPhone手机解锁效果</title>
<style type="text/css">
#iphone{position:relative;width:426px;height:640px;margin:10px auto;background:url(http://fgm.cc/iphone/1.jpg) no-repeat;}
#lock{position:absolute;left:50%;bottom:33px;width:358px;height:62px;margin-left:-179px;}
#lock span{position:absolute;width:93px;height:62px;cursor:pointer;background:url(http://fgm.cc/iphone/btn.jpg) no-repeat;}
</style>
<script type="text/javascript">
window.onload = function ()
{
    var iPhone = document.getElementById("iphone");
    var oLock = document.getElementById("lock");
    var oBtn = oLock.getElementsByTagName("span")[0];
    var disX = 0;
    var maxL = oLock.clientWidth - oBtn.offsetWidth;
    var oBg = document.createElement("img");
    oBg.src = "http://fgm.cc/iphone/2.jpg";//预加载下第二张背景，其它没什么大用。
    oBtn.onmousedown = function (e)
    {
        var e = e || window.event;
        disX = e.clientX - this.offsetLeft;
        
        document.onmousemove = function (e)
        {
            var e = e || window.event;
            var l = e.clientX - disX;
            
            l < 0 && (l = 0);
            l > maxL && (l = maxL);
            
            oBtn.style.left = l + "px";
            
            oBtn.offsetLeft == maxL && (iPhone.style.background = "url("+ oBg.src +")", oLock.style.display = "none");
            return false;
        };
        document.onmouseup = function ()
        {
            document.onmousemove = null;
            document.onmouseup = null;
            oBtn.releaseCapture && oBtn.releaseCapture();
            
            oBtn.offsetLeft > maxL / 2 ?
                startMove(maxL, function ()
                {
                    iPhone.style.background = "url("+ oBg.src +")";
                    oLock.style.display = "none"
                }) :
                startMove(0)
        };
        this.setCapture && this.setCapture();
        return false
    };
    function startMove (iTarget, onEnd)
    {
        clearInterval(oBtn.timer);
        oBtn.timer = setInterval(function ()
        {
            doMove(iTarget, onEnd)
        }, 30)
    }
    function doMove (iTarget, onEnd)
    {
        var iSpeed = (iTarget - oBtn.offsetLeft) / 5;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        iTarget == oBtn.offsetLeft ? (clearInterval(oBtn.timer), onEnd && onEnd()) : oBtn.style.left = iSpeed + oBtn.offsetLeft + "px"
    }
};
</script>
</head>
<body>
<div id="iphone">
    <div id="lock"><span></span></div>
</div>
</body>
</html>

自定义滚动条

<!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>自定义滚动条</title>
<style type="text/css">
body,div,ul,li,p{margin:0;padding:0;}
body{background:#3e3e3e;font:14px/1.5 \5fae\8f6f\96c5\9ed1;}
#box{width:600px;margin:20px auto;}
.list{position:relative;width:600px;height:144px;margin-bottom:10px;overflow:hidden;border-radius:8px;}
.list ul{position:absolute;top:0;left:0;height:144px;}
.list li{display:inline;float:left;width:144px;height:144px;list-style:none;background:#000;margin-right:8px;border-radius:8px;}
.list li img{float:left;width:124px;height:100px;border-radius:5px;margin:10px 0 0 10px;}
.list li p{float:left;color:#fff;width:100%;text-align:center;line-height:34px;}
.scrollBar{position:relative;height:19px;background:#0a0a0a;overflow:hidden;}
.scrollBar .barL,.scrollBar .barR,.scrollBar .barLStop,.scrollBar .barRStop{position:absolute;top:0;width:28px;height:19px;cursor:pointer;background:url(img/03.gif) no-repeat;}
.scrollBar .barL{left:0;}
.scrollBar .barR{right:0;background-position:right 0;}
.scrollBar .barLStop{left:0;background-position:0 -19px;cursor:default;}
.scrollBar .barRStop{right:0;background-position:right -19px;cursor:default;}
.scrollBar .barM{position:relative;height:15px;border:1px solid #545454;border-width:1px 0;margin:0 28px;padding:1px 0;z-index:1;cursor:pointer;}
.scrollBar .bar{position:absolute;top:1px;left:0;width:150px;height:15px;cursor:e-resize;background:url(img/01.gif) repeat-x;}
.scrollBar .bar .l,.scrollBar .bar .r{position:absolute;top:0;width:6px;height:15px;background:url(img/02.gif) no-repeat;}
.scrollBar .bar .l{left:-6px;}
.scrollBar .bar .r{right:-6px;background-position:right 0;}
#desc{color:#ccc;width:578px;padding:10px;margin:0 auto;line-height:2;border:1px dashed #666;}
#desc dd{margin-left:2em;}
.ta-r{text-align:right;}
</style>
<script type="text/javascript">
/*-------------------------- +
  获取id, class, tagName
 +-------------------------- */
var get = {
    byId: function(id) {
        return typeof id === "string" ? document.getElementById(id) : id
    },
    byClass: function(sClass, oParent) {
        var aClass = [];
        var reClass = new RegExp("(^| )" + sClass + "( |$)");
        var aElem = this.byTagName("*", oParent);
        for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
        return aClass
    },
    byTagName: function(elem, obj) {
        return (obj || document).getElementsByTagName(elem)
    }
};
/*-------------------------- +
  获取最终样式
 +-------------------------- */
function getStyle(obj, attr)
{
    return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])    
}
window.onload = function ()
{
    var oBox = get.byId("box");
    var oScrollBar = get.byClass("scrollBar", oBox)[0];
    var oList = get.byClass("list", oBox)[0];
    var oUl = get.byTagName("ul", oBox)[0];
    var aLi = get.byTagName("li", oBox);
    var oBarL = get.byClass("barL", oScrollBar)[0];
    var oBarM = get.byClass("barM", oScrollBar)[0];
    var oBarR = get.byClass("barR", oScrollBar)[0];
    var oBar = get.byClass("bar", oBarM)[0];
    var maxL = oBarM.offsetWidth - oBar.offsetWidth;
    var iMarginRight = getStyle(aLi[0], "marginRight");
    var timer = null;
    var iScale = 0;
    var disX = 0;
    var i = 0;
    
    //图片列表容器动态设置宽度
    oUl.style.width = (aLi[0].offsetWidth + iMarginRight) * aLi.length + "px";
    
    //拖动滚动条
    oBar.onmousedown = function (event)
    {
        var event = event || window.event;
        disX = event.clientX - oBar.offsetLeft;        
        document.onmousemove = function (event)
        {
            var event = event || window.event;
            var iL = event.clientX - disX;            
            iL <= 0 && (iL = 0);
            iL >= maxL && (iL = maxL);
            oBar.style.left = iL + "px";
            iScale = iL / maxL;            
            return false
        };        
        document.onmouseup = function ()
        {
            startMove(oUl, parseInt((oList.offsetWidth + iMarginRight - oUl.offsetWidth) * iScale));
            isStop();
            document.onmousemove = null;
            document.onmouseup = null
        };
        return false
    };
    //阻止滚动条点击事件冒泡
    oBar.onclick = function (event)
    {
        (event || window.event).cancelBubble = true
    };

    //滚动条左右按钮鼠标移入及键盘左右键按下事件
    oBarL.onmouseover = oBarR.onmouseover = document.onkeydown = function (event)
    {
        clearInterval(timer);
        var event = event || window.event;
        var iSpeed = 0;
        if (this == oBarR || event.keyCode == 39)
        {
            iSpeed = 5
        }
        else if(this == oBarL || event.keyCode == 37)
        {
            iSpeed = -5
        }
        timer = setInterval(function ()
        {
            togetherMove(getStyle(oBar, "left") + iSpeed, 1)    
        }, 30)
    };
    //滚动条左右按钮鼠标移开及键盘左右键抬起事件
    oBarL.onmouseout = oBarR.onmouseout = document.onkeyup = function ()
    {
        clearInterval(timer)    
    };    
    
    //滚动条可移动区域点击事件
    oBarM.onclick = function (event)
    {
        var iTarget = (event || window.event).clientX - oBox.offsetLeft - this.offsetLeft - oBar.offsetWidth / 2;
        togetherMove(iTarget)
    };
    
    //鼠标滚轮事件
    oBox.onmouseover = function (event)
    {
        event = event || window.event;        
        function mouseWheel(event)
        {
            var delta = event.wheelDelta ? event.wheelDelta : -event.detail * 40
            var iTarget = delta > 0 ? -50 : 50;
            togetherMove(oBar.offsetLeft + iTarget)
        }
        addHandler(this, "mousewheel", mouseWheel);
        addHandler(this, "DOMMouseScroll", mouseWheel);
    };    
    
    //图片列表和流动条同时移动
    function togetherMove(iTarget, buffer)
    {
        if (iTarget <= 0)
        {
            timer && clearInterval(timer);
            iTarget = 0
        }
        else if (iTarget >= maxL)
        {
            timer && clearInterval(timer);
            iTarget    = maxL
        }
        iScale = iTarget / maxL;
        startMove(oUl, parseInt((oList.offsetWidth + iMarginRight - oUl.offsetWidth) * iScale), function () {isStop()}, buffer);
        startMove(oBar, iTarget, function () {isStop()}, buffer)
    }
    
    //判断滚动条是否到达边界
    function isStop()
    {
        oBarL.className = "barL";
        oBarR.className = "barR";
        switch (oBar.offsetLeft)
        {
            case 0:
                /(^|\s)barLStop(\s|$)/.test(oBarL.className) || (oBarL.className += " barLStop");
                break;
            case maxL:
                /(^|\s)barRStop(\s|$)/.test(oBarR.className) || (oBarR.className += " barRStop");
                break;
        }
    }
    isStop()
};
function addHandler(element, type, handler)
{
    return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
}
function startMove(obj, iTarget, fnEnd, buffer)
{
    clearInterval(obj.timer);
    obj.timer = setInterval(function ()
    {
        doMove(obj, iTarget, fnEnd, buffer)    
    }, 25)
}
function doMove(obj, iTarget, fnEnd, buffer)
{
    var iLeft = getStyle(obj, "left");
    var iSpeed = (iTarget - iLeft) / (buffer || 5);
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    iLeft == iTarget ? (clearInterval(obj.timer), fnEnd && fnEnd()) : obj.style.left = iLeft + iSpeed + "px"
}
</script>
</head>
<body>
<div id="box">
    <div class="list">
        <ul>
            <li><img src="img/1.jpg" /><p>iPhone 4</p></li>
            <li><img src="img/2.jpg" /><p>iPad 2</p></li>
            <li><img src="img/3.jpg" /><p>iPod touch</p></li>
            <li><img src="img/4.jpg" /><p>iPod classic</p></li>
            <li><img src="img/5.jpg" /><p>iPod shuffle</p></li>
            <li><img src="img/6.jpg" /><p>iPod nano</p></li>
            <li><img src="img/7.jpg" /><p>MacBook Air</p></li>
            <li><img src="img/8.jpg" /><p>MacBook Pro</p></li>
            <li><img src="img/9.jpg" /><p>Mac mini</p></li>
            <li><img src="img/10.jpg" /><p>Mac Pro</p></li>
        </ul>
    </div>
    <!--/list-->
    <div class="scrollBar">
        <div class="barL"></div>
        <div class="barM">
            <div class="bar">
                <div class="l"></div>
                <div class="r"></div>
            </div>
        </div>
        <div class="barR"></div>
    </div>
    <!--/scrollBar-->
</div>
<!--/box-->
<dl id="desc">
    <dt>功能说明：</dt>
    <dd>① 拖动滚动条，图片列表缓冲滑动至目标点；</dd>
    <dd>② 滚动条两端鼠标移入自动滑动；</dd>
    <dd>③ 滚动条滑动到两端自动更换为停止标识；</dd>
    <dd>④ 点击滚动条黑色背景区，滚动条及图片列表缓冲滑动至目标点；</dd>
    <dd>⑤ 支持键盘左右键；</dd>
    <dd>⑥ 支持鼠标滚轮。</dd>
    <dd class="ta-r">QQ:21314130, By — Ferris</dd>
</dl>
</body>
</html>

拖拽--Clone

<!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>拖拽--Clone</title>
<style type="text/css">
body,div{margin:0;padding:0;}
body{background:#3e3e3e;}
div{position:absolute;width:100px;height:100px;cursor:move;border:1px solid #888;background:#000;}
#drag1{top:100px;left:100px;}
#drag2{top:100px;left:300px;}
#temp{opacity:0.3;filter:alpha(opacity=30);}
</style>
<script type="text/javascript">
var zIndex = 1;
window.onload = function ()
{
    var oDrag1 = document.getElementById("drag1");
    var oDrag2 = document.getElementById("drag2");
    drag(oDrag1);
    drag(oDrag2);
};
function drag(oDrag)
{
    var disX = dixY = 0;
    oDrag.onmousedown = function (event)
    {
        var event = event || window.event;
        disX = event.clientX - this.offsetLeft;
        disY = event.clientY - this.offsetTop;        
        
        var oTemp = document.createElement("div");
        oTemp["id"] = "temp";
        oTemp.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle(this, null)["left"];
        oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
        oTemp.style.zIndex = zIndex++;
        document.body.appendChild(oTemp);
        
        document.onmousemove = function (event)
        {
            var event = event || window.event;
            var iL = event.clientX - disX;
            var iT = event.clientY - disY;
            var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
            var maxT = document.documentElement.clientHeight - oDrag.offsetHeight
            
            iL <= 0 && (iL = 0);
            iT <= 0 && (iT = 0);
            iL >= maxL && (iL = maxL);
            iT >= maxT && (iT = maxT);
            
            oTemp.style.left = iL + "px";
            oTemp.style.top = iT + "px";
            return false;
        };
        
        document.onmouseup = function ()
        {
            document.onmousemove = null;
            document.onmouseup = null;
            oDrag.style.left = oTemp.style.left;
            oDrag.style.top = oTemp.style.top;
            oDrag.style.zIndex = oTemp.style.zIndex;
            document.body.removeChild(oTemp);
            oDrag.releaseCapture && oDrag.releaseCapture()
        };
        
        this.setCapture && this.setCapture();        
        return false
    }    
}
</script>
</head>
<body>
<div id="drag1"></div>
<div id="drag2"></div>
</body>
</html>

窗口拖拽（改变大小/最小化/最大化/还原/关闭）

<!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>窗口拖拽（改变大小/最小化/最大化/还原/关闭）</title>
<style type="text/css">
body,div,h2{margin:0;padding:0;}
body{background:url(img/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333;}
#drag{position:absolute;top:100px;left:100px;width:300px;height:160px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}
#drag .title{position:relative;height:27px;margin:5px;}
#drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}
#drag .title div{position:absolute;height:19px;top:2px;right:0;}
#drag .title a,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(img/tool.png) no-repeat;}
a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}
a.open:hover{background-position:0 -29px;}
#drag .title a.min{background-position:-29px 0;}
#drag .title a.min:hover{background-position:-29px -29px;}
#drag .title a.max{background-position:-60px 0;}
#drag .title a.max:hover{background-position:-60px -29px;}
#drag .title a.revert{background-position:-149px 0;display:none;}
#drag .title a.revert:hover{background-position:-149px -29px;}
#drag .title a.close{background-position:-89px 0;}
#drag .title a.close:hover{background-position:-89px -29px;}
#drag .content{overflow:auto;margin:0 5px;}
#drag .resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(img/resize.png) no-repeat;}
#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{position:absolute;background:#000;overflow:hidden;opacity:0;filter:alpha(opacity=0);}
#drag .resizeL,#drag .resizeR{top:0;width:5px;height:100%;cursor:w-resize;}
#drag .resizeR{right:0;}
#drag .resizeT,#drag .resizeB{width:100%;height:5px;cursor:n-resize;}
#drag .resizeT{top:0;}
#drag .resizeB{bottom:0;}
#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{width:8px;height:8px;background:#FF0;}
#drag .resizeLT{top:0;left:0;cursor:nw-resize;}
#drag .resizeTR{top:0;right:0;cursor:ne-resize;}
#drag .resizeLB{left:0;bottom:0;cursor:ne-resize;}
</style>
<script type="text/javascript">
/*-------------------------- +
  获取id, class, tagName
 +-------------------------- */
var get = {
    byId: function(id) {
        return typeof id === "string" ? document.getElementById(id) : id
    },
    byClass: function(sClass, oParent) {
        var aClass = [];
        var reClass = new RegExp("(^| )" + sClass + "( |$)");
        var aElem = this.byTagName("*", oParent);
        for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
        return aClass
    },
    byTagName: function(elem, obj) {
        return (obj || document).getElementsByTagName(elem)
    }
};
var dragMinWidth = 250;
var dragMinHeight = 124;
/*-------------------------- +
  拖拽函数
 +-------------------------- */
function drag(oDrag, handle)
{
    var disX = dixY = 0;
    var oMin = get.byClass("min", oDrag)[0];
    var oMax = get.byClass("max", oDrag)[0];
    var oRevert = get.byClass("revert", oDrag)[0];
    var oClose = get.byClass("close", oDrag)[0];
    handle = handle || oDrag;
    handle.style.cursor = "move";
    handle.onmousedown = function (event)
    {
        var event = event || window.event;
        disX = event.clientX - oDrag.offsetLeft;
        disY = event.clientY - oDrag.offsetTop;
        
        document.onmousemove = function (event)
        {
            var event = event || window.event;
            var iL = event.clientX - disX;
            var iT = event.clientY - disY;
            var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
            var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
            
            iL <= 0 && (iL = 0);
            iT <= 0 && (iT = 0);
            iL >= maxL && (iL = maxL);
            iT >= maxT && (iT = maxT);
            
            oDrag.style.left = iL + "px";
            oDrag.style.top = iT + "px";
            
            return false
        };
        
        document.onmouseup = function ()
        {
            document.onmousemove = null;
            document.onmouseup = null;
            this.releaseCapture && this.releaseCapture()
        };
        this.setCapture && this.setCapture();
        return false
    };    
    //最大化按钮
    oMax.onclick = function ()
    {
        oDrag.style.top = oDrag.style.left = 0;
        oDrag.style.width = document.documentElement.clientWidth - 2 + "px";
        oDrag.style.height = document.documentElement.clientHeight - 2 + "px";
        this.style.display = "none";
        oRevert.style.display = "block";
    };
    //还原按钮
    oRevert.onclick = function ()
    {        
        oDrag.style.width = dragMinWidth + "px";
        oDrag.style.height = dragMinHeight + "px";
        oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
        oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
        this.style.display = "none";
        oMax.style.display = "block";
    };
    //最小化按钮
    oMin.onclick = oClose.onclick = function ()
    {
        oDrag.style.display = "none";
        var oA = document.createElement("a");
        oA.className = "open";
        oA.href = "javascript:;";
        oA.title = "还原";
        document.body.appendChild(oA);
        oA.onclick = function ()
        {
            oDrag.style.display = "block";
            document.body.removeChild(this);
            this.onclick = null;
        };
    };
    //阻止冒泡
    oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function (event)
    {
        this.onfocus = function () {this.blur()};
        (event || window.event).cancelBubble = true    
    };
}
/*-------------------------- +
  改变大小函数
 +-------------------------- */
function resize(oParent, handle, isLeft, isTop, lockX, lockY)
{
    handle.onmousedown = function (event)
    {
        var event = event || window.event;
        var disX = event.clientX - handle.offsetLeft;
        var disY = event.clientY - handle.offsetTop;    
        var iParentTop = oParent.offsetTop;
        var iParentLeft = oParent.offsetLeft;
        var iParentWidth = oParent.offsetWidth;
        var iParentHeight = oParent.offsetHeight;
        
        document.onmousemove = function (event)
        {
            var event = event || window.event;
            
            var iL = event.clientX - disX;
            var iT = event.clientY - disY;
            var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
            var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;            
            var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
            var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
            
            isLeft && (oParent.style.left = iParentLeft + iL + "px");
            isTop && (oParent.style.top = iParentTop + iT + "px");
            
            iW < dragMinWidth && (iW = dragMinWidth);
            iW > maxW && (iW = maxW);
            lockX || (oParent.style.width = iW + "px");
            
            iH < dragMinHeight && (iH = dragMinHeight);
            iH > maxH && (iH = maxH);
            lockY || (oParent.style.height = iH + "px");
            
            if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = null;
            
            return false;    
        };
        document.onmouseup = function ()
        {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
};
window.onload = window.onresize = function ()
{
    var oDrag = document.getElementById("drag");
    var oTitle = get.byClass("title", oDrag)[0];
    var oL = get.byClass("resizeL", oDrag)[0];
    var oT = get.byClass("resizeT", oDrag)[0];
    var oR = get.byClass("resizeR", oDrag)[0];
    var oB = get.byClass("resizeB", oDrag)[0];
    var oLT = get.byClass("resizeLT", oDrag)[0];
    var oTR = get.byClass("resizeTR", oDrag)[0];
    var oBR = get.byClass("resizeBR", oDrag)[0];
    var oLB = get.byClass("resizeLB", oDrag)[0];
    
    drag(oDrag, oTitle);
    //四角
    resize(oDrag, oLT, true, true, false, false);
    resize(oDrag, oTR, false, true, false, false);
    resize(oDrag, oBR, false, false, false, false);
    resize(oDrag, oLB, true, false, false, false);
    //四边
    resize(oDrag, oL, true, false, false, true);
    resize(oDrag, oT, false, true, true, false);
    resize(oDrag, oR, false, false, false, true);
    resize(oDrag, oB, false, false, true, false);
    
    oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
    oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
}
</script>
</head>
<body>
<div id="drag">
    <div class="title">
        <h2>这是一个可以拖动的窗口</h2>
        <div>
            <a class="min" href="javascript:;" title="最小化"></a>
            <a class="max" href="javascript:;" title="最大化"></a>
            <a class="revert" href="javascript:;" title="还原"></a>
            <a class="close" href="javascript:;" title="关闭"></a>
        </div>
    </div>
    <div class="resizeL"></div>
    <div class="resizeT"></div>
    <div class="resizeR"></div>
    <div class="resizeB"></div>
    <div class="resizeLT"></div>
    <div class="resizeTR"></div>
    <div class="resizeBR"></div>
    <div class="resizeLB"></div>
    <div class="content">
        ① 窗口可以拖动；<br />
        ② 窗口可以通过八个方向改变大小；<br />
        ③ 窗口可以最小化、最大化、还原、关闭；<br />
        ④ 限制窗口最小宽度/高度。
    </div>    
</div>
</body>
</html>