码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2015-05-04 01:06:27      阅读：241      评论：0      收藏：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>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>

 

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

标签：

原文地址：http://www.cnblogs.com/mayufo/p/4475051.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！