<!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;426px;height:640px;margin:10px auto;background:url(http://fgm.cc/iphone/1.jpg) no-repeat;} #lock{position:absolute;left:50%;bottom:33px;358px;height:62px;margin-left:-179px;} #lock span{position:absolute;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 5fae8f6f96c59ed1;} #box{600px;margin:20px auto;} .list{position:relative;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;144px;height:144px;list-style:none;background:#000;margin-right:8px;border-radius:8px;} .list li img{float:left;124px;height:100px;border-radius:5px;margin:10px 0 0 10px;} .list li p{float:left;color:#fff;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;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-1px 0;margin:0 28px;padding:1px 0;z-index:1;cursor:pointer;} .scrollBar .bar{position:absolute;top:1px;left:0;150px;height:15px;cursor:e-resize;background:url(img/01.gif) repeat-x;} .scrollBar .bar .l,.scrollBar .bar .r{position:absolute;top:0;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;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;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 5fae8f6f96c59ed1;color:#333;} #drag{position:absolute;top:100px;left:100px;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;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;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;5px;height:100%;cursor:w-resize;} #drag .resizeR{right:0;} #drag .resizeT,#drag .resizeB{100%;height:5px;cursor:n-resize;} #drag .resizeT{top:0;} #drag .resizeB{bottom:0;} #drag .resizeLT,#drag .resizeTR,#drag .resizeLB{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>