在工作過程中經常遇到做彈出的層效果,有的需要在元素右下彈出,有的需要彈出在浏覽器正中間,有的需要彈出後再拖拽,有的需要背景要變暗,有的需要彈出的層跟隨鼠標移動……
網上此類效果其實很多,有Javascript原生的,有基於框架寫的,但自己好多時候用不到那麼高級的效果,所以就把這些功能都分開來一步一步實現。
其實原理很簡單.有兩種實現途徑:一種是通過元素創建和刪除,一種是通過顯示和隱藏,其余的具體要做成什麼樣子,就留給CSS來控制了。下面從最簡單的開始(不基於框架)
function show(){ var oShow = document.getElementById('show'); oShow.style.display = 'block'; var oClose = document.createElement("span"); oClose.innerHtml = "×"; oShow.appendChild(oClose); oClose.onclick = function(){ oShow.style.display = 'none'; oShow.removeChild(this); } }
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
function show(){ var iWidth = document.documentElement.clIEntWidth; //獲取浏覽器寬度 var iHeight = document.documentElement.clIEntHeight; //獲取浏覽器高度 var oShow = document.getElementById('show'); oShow.style.display = 'block'; oShow.style.left = (iWidth-302)/2+"px"; //居中橫坐標 oShow.style.top = (iHeight-202)/2+"px"; //居中縱坐標 var oClose = document.createElement("span"); oClose.innerHtml = "×"; oShow.appendChild(oClose); oClose.onclick = function(){ oShow.style.display = 'none'; oShow.removeChild(this); } }
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
function show(){ var iWidth = document.documentElement.clIEntWidth; var iHeight = document.documentElement.clIEntHeight; var bgObj = document.createElement("div"); //創建背景層 bgObj.setAttribute("id","bgbox"); bgObj.style.width = iWidth+"px"; bgObj.style.height =Math.max(document.body.clIEntHeight, iHeight)+"px"; document.body.appendChild(bgObj); //將創建的層插入body中 var oShow = document.getElementById('show'); oShow.style.display = 'block'; oShow.style.left = (iWidth-302)/2+"px"; oShow.style.top = (iHeight-202)/2+"px"; var oClosebtn = document.createElement("span"); oClosebtn.innerHtml = "×"; oShow.appendChild(oClosebtn); function oClose(){ oShow.style.display = 'none'; oShow.removeChild(oClosebtn); document.body.removeChild(bgObj); } oClosebtn.onclick = oClose; bgObj.onclick = oClose; }
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
function getEvent(){ return window.event || arguments.callee.caller.arguments[0]; // 獲得事件Event對象,用於兼容IE和Firefox } document.onkeyup = function(){ var event = getEvent(); if (event.keyCode == 27){ oClose(); } }
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
var moveX = 0; var moveY = 0; var moveTop = 0; var moveLeft = 0; var moveable = false; var docMouseMoveEvent = document.onmousemove; var docMouseUpEvent = document.onmouseup; titleBar = document.getElementById('titlebar'); titleBar.onmousedown = function() { var evt = getEvent(); moveable = true; moveX = evt.clIEntX; moveY = evt.clIEntY; moveTop = parseInt(oShow.style.top); moveLeft = parseInt(oShow.style.left); document.onmousemove = function() { if (moveable) { var evt = getEvent(); var x = moveLeft + evt.clIEntX - moveX; var y = moveTop + evt.clIEntY - moveY; if ( x > 0 &&( x + 302 < iWidth) && y > 0 && (y + 202 < iHeight) ) { oShow.style.left = x + "px"; oShow.style.top = y + "px"; } } }; document.onmouseup = function () { if (moveable) { document.onmousemove = docMouseMoveEvent; document.onmouseup = docMouseUpEvent; moveable = false; moveX = 0; moveY = 0; moveTop = 0; moveLeft = 0; } }; }
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
歡迎大家多提改進意見或建議,共同學習和探討