iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）
2015-05-03 23:33
716 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
- 网页窗口拖拽（改变大小/最小化/最大化/还原/关闭）
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
- 漂亮的Js拖动层，窗口拖拽（改变大小/最小化/最大化/还原/关闭）
- 猎豹MFC--窗口操作--最大化 最小化还原 关闭 大小位置 居中显示 图标 标题
- win7下关闭窗口最大化和最小化时的窗口动画效果的方法
- WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持（WmNCHitTest）、自定义最大化位置和大小（WmGetMinMaxInfo）
- API 拦截窗口关闭&最大化&最小化消息
- 关于右键菜单实现子窗口最大化，最小化，还原和关闭的小感想
- [WPF]自由配置窗体最大化、最小化按钮是否可用，窗口大小不可改变
- winform窗口只允许最大化最小化 并随分辨率大小而改变
- [Win32]只允许最大化最小化窗口，禁止双击标题栏、拖动窗体、点击复原按钮来改变窗口大小
- 【Qt】自定义标题栏并实现最小化/最大化/关闭窗口功能
- vs 中CMainFrame::PreCreateWindow(CREATETRUCT& cs)无法改变窗口大小
- 让Qt的窗口最小化最大化及关闭按钮都消失
- 在网页中使用javascript打开没有最大化、最小化和关闭按钮的窗口
- JS实现可自定义大小，可双击关闭的弹出层效果
- MFC对话框最大化、最小化、全屏显示、可拉伸、（控件大小动态化）、滚动条
- Flex窗口最小化最大化，关闭，拖动组件