-
頁面布局查看全部
-
鼠標(biāo)拖拽事件三個關(guān)鍵： var mouseOffsetX = 0; // 偏移 var mouseOffsetY = 0; var isDraging = false; // 是否可拖拽的標(biāo)記 （1）在標(biāo)題欄上按下。鼠標(biāo)在標(biāo)題欄上按下時，要計算鼠標(biāo)相對拖拽元素的左上角的坐標(biāo)，并且標(biāo)記元素為可拖動。 g('dialogTitle').addEventListener('mousedown',function(e){ var e = e || window.event; mouseOffsetX = e.pageX - g('dialog').offsetLeft; mouseOffsetY = e.pageY - g('dialog').offsetTop; isDraging = true; }) （2）開始移動。鼠標(biāo)開始移動，要檢測登錄浮層是否可標(biāo)記為移動，如果是，則更新元素的位置到當(dāng)前鼠標(biāo)的位置(注意：要減去第一步中獲得的偏移) document.onmousemove = function( e ){ var e = e || window.event; var mouseX = e.pageX; // 鼠標(biāo)當(dāng)前的位置 var mouseY = e.pageY; var moveX = 0; // 浮層元素的新位置 var moveY = 0; if( isDraging === true ){ moveX = mouseX - mouseOffsetX moveY = mouseY - mouseOffsetY; g('dialog').style.left = moveX + 'px'; g('dialog').style.top = moveY + 'px'; } } （3）放開。鼠標(biāo)松開的時候，標(biāo)記元素為不可拖動狀態(tài)即可。 document.onmouseup = function(){ isDraging = false; }查看全部
-
區(qū)分clientX 與 pageX clientX/Y: clientX/Y獲取到的是觸發(fā)點(diǎn)相對瀏覽器可視區(qū)域左上角距離，不隨頁面滾動而改變 兼容性：所有瀏覽器均支持 pageX/Y: pageX/Y獲取到的是觸發(fā)點(diǎn)相對文檔區(qū)域左上角距離，會隨著頁面滾動而改變 兼容性：除IE6/7/8不支持外，其余瀏覽器均支持 http://www.bbs0101.com/archives/124.html查看全部
-
function g(id) { return document.getElementById(id); } // 自動居中 - 登錄浮層 function autoCenter(el) { // 獲得瀏覽器可視區(qū)域?qū)捀? var bodyW = document.documentElement.clientWidth; var bodyH = document.documentElement.clientHeight; // 獲得元素實(shí)際寬高 var elW = el.offsetWidth; var elH = el.offsetHeight; el.style.left = (bodyW - elW) / 2 + "px"; el.style.top = (bodyW - elH) / 2 + "px"; } // 自動全屏 - 遮罩 function fillToBody(el) { el.style.width = document.documentElement.clientWidth + 'px'; el.style.height = document.documentElement.clientHeight + 'px'; }查看全部
-
獲取/設(shè)置 元素對象的left/top 位置 Element.style.left Element.style.top 重新為left 和 top 賦值，格式是‘？px’,例如 Element.top='10px'查看全部
-
重點(diǎn)屬性： 窗口顯示區(qū)域的寬/高： document.documentElement.clientWidth document.documentElement.clientHeight 獲取當(dāng)前時間發(fā)生時的鼠標(biāo)X/Y坐標(biāo)： event.pageX event.pageY 獲取元素對象的實(shí)際寬高： element.offsetWidth element.offsetHeight查看全部
-
腳本中用到的 重點(diǎn)函數(shù)查看全部
-
腳本開發(fā) 及其用到的函數(shù)查看全部
-
前段界面開發(fā)查看全部
-
拖拽原理分析查看全部
-
頁面結(jié)構(gòu)分析查看全部
-
1、界面結(jié)構(gòu)分析 dialog{ dialogTitle{ dialogClose } dialoglogContent{ 用戶名 密碼 登錄按鈕 } } 2、拖拽原理 在標(biāo)題欄上按下（）記錄浮層可拖拽 開始移動｛ 判斷浮層是否可以拖動 跟隨鼠標(biāo)移動 范圍限定 ｝ 放開（）記錄浮層不可拖拽 3、前端界面開發(fā) 登錄浮層（dialog） 遮罩層（mask） 觸發(fā)鏈接（） 4、腳本開發(fā) 獲取元素對象的通用函數(shù) $(id){ return document.getElementById(id); }document 自動居中元素對象函數(shù) autoCenter(ele) 自動全屏元素對象函數(shù) fillTOBody(ele) 三個鼠標(biāo)事件處理 展現(xiàn)登錄浮層函數(shù) showDialog() 隱藏登錄浮層函數(shù) hideDialog() 重點(diǎn)用到的函數(shù) document.getElementById(id) 根據(jù)傳入的id獲得元素（element）對象 Element.addEventListener(type,function) 為元素對象設(shè)置事件偵聽處理 document.onmouseup=function(e){} 鼠標(biāo)松開時觸發(fā) document.onmousemove=function(e){} 鼠標(biāo)移動時觸發(fā) window.onresize=function(){} 窗口大小改變時觸發(fā)的方法 重點(diǎn)屬性 document.documentElement.clientWidth 獲得窗口顯示區(qū)域的寬 document.documentElement.clientHeight 獲得窗口顯示區(qū)域的高 Event.pageX 獲得當(dāng)前事件發(fā)生時的鼠標(biāo)X坐標(biāo) Event.pageY 獲得當(dāng)前事件發(fā)生時的鼠標(biāo)Y坐標(biāo) Element.offsetWidth 獲得元素對象的實(shí)際寬度 Element.offstHeight 獲得元素對象的實(shí)際高度 設(shè)置位置 Element.style.left 獲取/設(shè)置元素對象的left/top 位置 Element.style.top查看全部
-
B在鼠標(biāo)事件發(fā)生的時候，從 Event.pageX 獲得鼠標(biāo)的x 坐標(biāo)位置查看全部
-
防止鼠標(biāo)選中事件 onselectstart="return false";查看全部
-
獲取各種寬高查看全部
舉報
0/150
提交
取消