-
拖拽特效总结——开发流程： 界面结构分析——>拖拽原理分析——>前端界面开发——>脚本开发 拖拽原理分析： （1）在标题栏上按下【记录浮层可拖拽】 （2）开始移动 （3）放开【记录浮层不可拖拽】 前端界面开发： （1）登录浮层 （2）蒙板 （3）触发链接 脚本开发： （1）获取元素对象的通用函数 g(id) （2）自动居中元素对象函数 autoCenter(Element) （3）自动全屏元素对象函数 fillTOBody(Element) （4）三个鼠标事件处理 ... （5）展现登录浮层函数 showDialog() （6）隐藏登录浮层函数 hideDialog() 重点函数： document.getElementById(id) 根据传入的ID获得元素(Element)对象 ELement.addEventListener(Type,function) 为元素对象设置事件侦听处理 document.onmouseup=function(e){} 鼠标松开时触发 document.onmousemove = function(e){} 鼠标移动时触发 window.onresize=function(){} 窗口大小改变时触发的方法 注意：严格来说document.onmouseup鼠标事件的设置也是document对象中一个名叫mouseup的属性，其值为一个函数 获得窗口显示区域的宽/高： document.documentElement.clientWidth 与 document.documentElement.clientHeight 获得当前事件发生时的鼠标x/y坐标： Event.pageX 与 Event.pageY 获得元素对象的实际宽/高度： Element.offsetWidth 与 Element.offsetHeight 注意：属性有些是只读的，有些可以写 获取/设置元素对象的left/top位置： Element.style.left 与 Element.style.top 注意：重新为left和top赋值格式是"?px",例如Element.top="10px"查看全部
-
触发打开及关闭登录浮层： //鼠标事件3 － 鼠标松开的时候（标记元素为不可拖动即可） document.onmouseup = function(){ isDraging = false; } //展现登录浮层 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在鼠标事件发生的时候，从 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）放开。鼠标松开的时候，标记元素为不可拖动状态即可。 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'; } // 自动扩展元素到全部显示区域 function fillToBody( el ){ el.style.width = document.documentElement.clientWidth +'px'; el.style.height = document.documentElement.clientHeight + 'px'; }查看全部
-
获得窗口显示区域的宽度的方法是document.documentElement.clientWidth查看全部
-
防止鼠标选中:onselectstart="return false" 设置透明度：opacity:0.4;filter: Alpha(opacity=40);查看全部
-
每次涉及改变窗口大小时都需要考虑添加监听函数onresize，使之从新调整。查看全部
-
一、鼠标在标题栏上移动； 二、鼠标开始移动； 三、鼠标松开查看全部
-
重点在于 window.onresize=function(){}查看全部
-
onslectstart="return false"查看全部
-
鼠标松开的时候，标记元素为不可拖动状态查看全部
-
鼠标开始移动，检测是否可移动，更新元素的位置到当前鼠标位置查看全部
-
计算鼠标相对拖拽元素的偏移，标记可拖拽查看全部
举报
0/150
提交
取消