-
拖拽特效總結——開發(fā)流程： 界面結構分析——>拖拽原理分析——>前端界面開發(fā)——>腳本開發(fā) 拖拽原理分析： （1）在標題欄上按下【記錄浮層可拖拽】 （2）開始移動 （3）放開【記錄浮層不可拖拽】 前端界面開發(fā)： （1）登錄浮層 （2）蒙板 （3）觸發(fā)鏈接 腳本開發(fā)： （1）獲取元素對象的通用函數(shù) g(id) （2）自動居中元素對象函數(shù) autoCenter(Element) （3）自動全屏元素對象函數(shù) fillTOBody(Element) （4）三個鼠標事件處理 ... （5）展現(xiàn)登錄浮層函數(shù) showDialog() （6）隱藏登錄浮層函數(shù) hideDialog() 重點函數(shù)： document.getElementById(id) 根據(jù)傳入的ID獲得元素(Element)對象 ELement.addEventListener(Type,function) 為元素對象設置事件偵聽處理 document.onmouseup=function(e){} 鼠標松開時觸發(fā) document.onmousemove = function(e){} 鼠標移動時觸發(fā) window.onresize=function(){} 窗口大小改變時觸發(fā)的方法 注意：嚴格來說document.onmouseup鼠標事件的設置也是document對象中一個名叫mouseup的屬性，其值為一個函數(shù) 獲得窗口顯示區(qū)域的寬/高： document.documentElement.clientWidth 與 document.documentElement.clientHeight 獲得當前事件發(fā)生時的鼠標x/y坐標： Event.pageX 與 Event.pageY 獲得元素對象的實際寬/高度： Element.offsetWidth 與 Element.offsetHeight 注意：屬性有些是只讀的，有些可以寫 獲取/設置元素對象的left/top位置： Element.style.left 與 Element.style.top 注意：重新為left和top賦值格式是"?px",例如Element.top="10px"查看全部
-
觸發(fā)打開及關閉登錄浮層： //鼠標事件3 － 鼠標松開的時候（標記元素為不可拖動即可） document.onmouseup = function(){ isDraging = false; } //展現(xiàn)登錄浮層 function showDialog(){ g('dialog').style.display = 'block'; g('mask').style.display = 'block'; autoCenter(g('dialog')); fillToBody( g('mask') ); } // 隱藏登錄浮層 function hideDialog(){ g('dialog').style.display = 'none'; g('mask').style.display = 'none'; } window.onresize =function(){ autoCenter(g('dialog')); fillToBody( g('mask') ); }查看全部
-
拖動范圍限定： // 鼠標事件2 document.onmousemove = function( e ){ var e = e || window.event; var mouseX = e.pageX; //鼠標當前的位置 var mouseY = e.pageY; var moveX = 0; // 浮層元素的新位置 var moveY = 0; if( isDraging === true ){ moveX = mouseX - mouseOffsetX; moveY = mouseY - mouseOffsetY; //范圍限定moveX > 0 并且 moveX < (頁面最大寬度 - 浮層的寬度) //moveY > 0 并且 movey < (頁面最大高度 - 浮層的高度) var pageWidth = document.documentElement.clientWidth ; var pageHeight = document.documentElement.clientHeight ; var dialogWidth = g('dialog').offsetWidth; var dialogHeight = g('dialog').offsetHeight; var maxX = pageWidth - pageHeight; var maxY = pageHeight- dialogHeight; moveX = Math.min( maxX , Math.max(0,moveX) ); moveY = Math.min( maxY , Math.max(0,moveY) ); g('dialog').style.left = moveX + 'px'; g('dialog').style.top = moveY + 'px'; } }查看全部
-
B在鼠標事件發(fā)生的時候，從 Event.pageX 獲得鼠標的x 坐標位置查看全部
-
鼠標拖拽事件三個關鍵： var mouseOffsetX = 0; // 偏移 var mouseOffsetY = 0; var isDraging = false; // 是否可拖拽的標記 （1）在標題欄上按下。鼠標在標題欄上按下時，要計算鼠標相對拖拽元素的左上角的坐標，并且標記元素為可拖動。 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）開始移動。鼠標開始移動，要檢測登錄浮層是否可標記為移動，如果是，則更新元素的位置到當前鼠標的位置(注意：要減去第一步中獲得的偏移) document.onmousemove = function( e ){ var e = e || window.event; var mouseX = e.pageX; // 鼠標當前的位置 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）放開。鼠標松開的時候，標記元素為不可拖動狀態(tài)即可。 document.onmouseup = function(){ isDraging = false; }查看全部
-
遮罩全屏及自動居中浮層： <div class="link"> <a href="javascript:showDialog();">登錄</a> </div> <div class="ui-mask" id="mask" onselectstart="return false"></div> js： // 獲取元素對象 function g(id){return document.getElementById(id);} // 自動居中元素（el = Element） function autoCenter( el ){ var bodyW = document.documentElement.clientWidth; var bodyH = document.documentElement.clientHeight; var elW = el.offsetWidth; var elH = el.offsetHeight; el.style.left = (bodyW-elW)/2 + 'px'; el.style.top = (bodyH-elH)/2 + 'px'; } // 自動擴展元素到全部顯示區(qū)域 function fillToBody( el ){ el.style.width = document.documentElement.clientWidth +'px'; el.style.height = document.documentElement.clientHeight + 'px'; }查看全部
-
獲得窗口顯示區(qū)域的寬度的方法是document.documentElement.clientWidth查看全部
-
防止鼠標選中:onselectstart="return false" 設置透明度：opacity:0.4;filter: Alpha(opacity=40);查看全部
-
每次涉及改變窗口大小時都需要考慮添加監(jiān)聽函數(shù)onresize，使之從新調整。查看全部
-
一、鼠標在標題欄上移動； 二、鼠標開始移動； 三、鼠標松開查看全部
-
重點在于 window.onresize=function(){}查看全部
-
onslectstart="return false"查看全部
-
鼠標松開的時候，標記元素為不可拖動狀態(tài)查看全部
-
鼠標開始移動，檢測是否可移動，更新元素的位置到當前鼠標位置查看全部
-
計算鼠標相對拖拽元素的偏移，標記可拖拽查看全部
舉報
0/150
提交
取消