正文

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

IP云
IP云V管理员/0 阅读
11/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

<!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&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）的更多相关文章

  1. css3实现渐变的iPhone滑动解锁效果

    先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line ...

  2. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  3. 3分钟教你做一个iphone手机浏览器

    3分钟教你做一个iphone手机浏览器 第一步:新建一个Single View工程: 第二步:新建好工程,关闭arc. 第三步:拖放一个Text Field 一个UIButton 和一个 UIWebV ...

  4. PyQt：无边框自定义标题栏及最大化最小化窗体大小调整

    环境 Python3.5.2 PyQt5 陈述 隐藏掉系统的控制栏,实现了自定义的标题控制栏,以及关闭/最大化/最小化的功能,自由调整窗体大小的功能(跟随一个大佬学的),代码内有详细注释 只要把Mai ...

  5. day52—JavaScript拖拽事件的应用（自定义滚动条）

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  6. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  7. iPhone手机更换自定义铃声

    ①首先将iPhone手机(iPhone5s)的数据线插入电脑USB接口中,然后打开iTunes(12.4.3.1)-->文件-->将文件添加到资料库 ②选中音乐文件-->点击编辑-- ...

  8. iphone手机safari浏览器访问网站滚动条不显示问题解决办法

    近排有公司同事出差在外需使用OA系统,发现iphone手机safari浏览器在该出现滚动条的页面没有显示滚动条,导致无法正常使用. 系统前端页面是采用jeasyui搭建的框架,使用iframe变更主页 ...

  9. electron-vue 窗口拖拽及自定义边框，及关闭缩小放大化方法

    1.窗口的最小化按钮和关闭按钮以及标题栏自定义,不使用 electron 自身携带的原生标题栏 在src文件夹下main下index.js文件添加 mainWindow = new BrowserWi ...

随机推荐

  1. NetBios 的结构体详解（网络控制块NCB）

    对之前网络基础编程用到控制块NCB进行介绍(补充): 在Win32环境下,使用VC++6.0进行NetBIOS程序开发时, 需要用到nb30.h文件和netapi32.lib静态链接库.前者定义了Ne ...

  2. mysql 执行流程

    mysql 执行流程 我们可以人为的把mysql 的主要功能分为如下模块. 1.初始化模块 mysql启动的时候执行初始化工作,如读取配置文件,分配一些全局变量(sql_model,catch buf ...

  3. 在这个年纪，打DOTA冲分有那么可笑么？

    大学四年,毕业两年,6年dota,总是在最无助的时候让心灵得到一丝安宁的东西,烟和dota. 我不知道dota对别人的意义是什么,一盘dota,在最多不超过1个半小时的时间里,仿佛经历了一个小人生,每 ...

  4. robotframework的学习笔记（十二）------DatabaseLibrary 库

    1.安装DatabaseLibrary库 DatabaseLibrary 下载地址:https://pypi.python.org/pypi/robotframework-databaselibrar ...

  5. 利用Eclipse构建SpringMVC项目

    简述 SpringBoot对Spring的的使用做了全面的封装,使用SpringBoot大大加快了开发进程,但是如果不了解Spring的特性,使用SpringBoot时会有不少问题 目前网上流传使用I ...

  6. 页面滚动到指定class样式位置

    var winTop =$(window).scrollTop(); var top = document.getElementsByClassName('is-danger')[0].getBoun ...

  7. Mybatis常用标签使用

    trim元素的主要功能是可以在自己包含的内容前加上某些前缀,也可以在其后加上某些后缀,与之对应的属性是prefix和suffix:可以把包含内容的首部某些内容覆盖,即忽略,也可以把尾部的某些内容覆盖, ...

  8. Centos 7 使用iptables

    systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止firewall开机启动 #安装 ...

  9. debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误

    因为获取服务器是异步的,所以 vue 先绑定数据. 如果 ??? 是通过 ajax 异步获取的,在获取之前,???是未定义的.此时在外面的标签上添加一个 v-if="???" 可以 ...

  10. 最佳 WordPress 静态缓存插件 WP Super Cache 安装和使用（转）

    WP Super Cache 是 WordPress 官方开发人员 Donncha开发,是当前最高效也是最灵活的 WordPress 静态缓存插件.它把整个网页直接生成 HTML 文件,这样 Web ...