-
嗯,图片问题看别人的也解决好了,另外老师好像忘了写点击登录浮层外(遮罩层)也能让登录界面消失的我也补上了,,,第117行,加一个onclick事件就行了~~查看全部
-
select 写错了!查看全部
-
限定范围: movX>0 并且movY<(页面最大值-浮层的高度) movY>0 并且movY<(页面最大值-浮层的宽度)查看全部
-
onresize 事件会在窗口或框架被调整大小时发生。
查看全部 -
禁止鼠标右键:oncontextmenu="return false"; 禁止选择:onselectstart="return false"; 禁止拖放:ondragstart="return false"; 禁止拷贝:oncopy=document.selection.empty() 。 禁止复制:oncopy = "return false"; 禁止保存:<noscript><iframe src="*.htm"></iframe></noscript>,放在head里面。 禁止粘贴:<input type=text onpaste="return false"> 禁止剪贴:oncut = "return false"; 关闭输入法:<input > opacity: 0.4; filter: Alpha(opacity=40); 设置透明度,和兼容IE设置透明度查看全部
-
原理: 1.鼠标在标题栏上按下时,标记为可以拖动。 2.鼠标移动时,判断检测图层是否可以拖动,是的话让图层跟随鼠标进行移动 3.鼠标松开时,标记元素不可拖动查看全部
-
分析结构查看全部
-
嘻嘻嘻嘻嘻嘻嘻嘻嘻查看全部
-
xxxxxxxxxxx查看全部
-
拖曳特效总结———重点属性查看全部
-
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'; }查看全部
-
拖拽特效总结——开发流程: 界面结构分析——>拖拽原理分析——>前端界面开发——>脚本开发 拖拽原理分析: (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"查看全部
-
拖动范围限定: // 鼠标事件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'; } }查看全部
-
每次涉及改变窗口大小时都需要考虑添加监听函数onresize,使之从新调整。查看全部
-
接下来编写一段代码,使得一个元素块可以被拖动。查看全部
举报
0/150
提交
取消