-
页面布局查看全部
-
鼠标拖拽事件三个关键： 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; }查看全部
-
区分clientX 与 pageX clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变 兼容性：所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变 兼容性：除IE6/7/8不支持外，其余浏览器均支持 http://www.bbs0101.com/archives/124.html查看全部
-
function g(id) { return document.getElementById(id); } // 自动居中 - 登录浮层 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 = (bodyW - elH) / 2 + "px"; } // 自动全屏 - 遮罩 function fillToBody(el) { el.style.width = document.documentElement.clientWidth + 'px'; el.style.height = document.documentElement.clientHeight + 'px'; }查看全部
-
获取/设置 元素对象的left/top 位置 Element.style.left Element.style.top 重新为left 和 top 赋值，格式是‘？px’,例如 Element.top='10px'查看全部
-
重点属性： 窗口显示区域的宽/高： document.documentElement.clientWidth document.documentElement.clientHeight 获取当前时间发生时的鼠标X/Y坐标： event.pageX event.pageY 获取元素对象的实际宽高： element.offsetWidth element.offsetHeight查看全部
-
脚本中用到的 重点函数查看全部
-
脚本开发 及其用到的函数查看全部
-
前段界面开发查看全部
-
拖拽原理分析查看全部
-
页面结构分析查看全部
-
1、界面结构分析 dialog{ dialogTitle{ dialogClose } dialoglogContent{ 用户名 密码 登录按钮 } } 2、拖拽原理 在标题栏上按下（）记录浮层可拖拽 开始移动｛ 判断浮层是否可以拖动 跟随鼠标移动 范围限定 ｝ 放开（）记录浮层不可拖拽 3、前端界面开发 登录浮层（dialog） 遮罩层（mask） 触发链接（） 4、脚本开发 获取元素对象的通用函数 $(id){ return document.getElementById(id); }document 自动居中元素对象函数 autoCenter(ele) 自动全屏元素对象函数 fillTOBody(ele) 三个鼠标事件处理 展现登录浮层函数 showDialog() 隐藏登录浮层函数 hideDialog() 重点用到的函数 document.getElementById(id) 根据传入的id获得元素（element）对象 Element.addEventListener(type,function) 为元素对象设置事件侦听处理 document.onmouseup=function(e){} 鼠标松开时触发 document.onmousemove=function(e){} 鼠标移动时触发 window.onresize=function(){} 窗口大小改变时触发的方法 重点属性 document.documentElement.clientWidth 获得窗口显示区域的宽 document.documentElement.clientHeight 获得窗口显示区域的高 Event.pageX 获得当前事件发生时的鼠标X坐标 Event.pageY 获得当前事件发生时的鼠标Y坐标 Element.offsetWidth 获得元素对象的实际宽度 Element.offstHeight 获得元素对象的实际高度 设置位置 Element.style.left 获取/设置元素对象的left/top 位置 Element.style.top查看全部
-
B在鼠标事件发生的时候，从 Event.pageX 获得鼠标的x 坐标位置查看全部
-
防止鼠标选中事件 onselectstart="return false";查看全部
-
獲取各種寬高查看全部
举报
0/150
提交
取消