002-DOM事件实例-实现一个可以拖拽的登陆窗口

时间：2023-03-30 17:59:33 CSS

002-DOM事件实例-jQuery实现一个可以拖拽的登录窗口，我们公司现在用的还是挺多的。毕竟使用它不需要考虑IE兼容，可以让开发效率更高。一、项目需求和基本的HTML和CSSQQ登录框相信大家都用过。可以在页面上任意拖放，然后点击状态可以切换各种状态。先做HTML结构

账号　数：

密码　：

state

down

在线

我在线上Q我吧离开忙碌请勿打扰不可见2。拖拽登录框的CSS部分省略，因为涉及到大量操作类名的操作。首先封装一个兼容IE获取类名的函数，因为IE10不支持document.getElementByClassName()/****@clsName你要找的className的名字*@parent可选参数，传入父元素查找父元素下的所有classNames*/functiongetByClass(clsName,parent){//如果可以使用getElementsByClassNameif(document.getElementsByClassName){returndocument.getElementsByClassName(clsName);}//如果传入的parent存在，使用document.getElementById(parent)获取父元素减少判断，否则oParent等于documentvaroParent=parent?document.getElementById(parent):document,eles=[],//定义一个空数组elements=oParent.getElementsByTagName('*');//获取所有标签(vari=0,l=elements.length;imaxW){l=maxW;}如果(t<0){t=10;}elseif(t>maxH){t=maxH;}//及时更新登录框的style.left和right信息oDrag.style.left=l+'px';oDrag.style.top=t+'px';}3。实现点击按钮关闭输入框//获取关闭标签元素varoClose=document.getElementById('ui_boxyClose');//给这个元素绑定一个点击事件oClose.onclick=function(){//当这个按钮被点击时，设置这个按钮的显示为nonedocument.getElementById('loginPanel').style.display='none';}

上一篇：数组介绍及使用

下一篇：CSS实现自适应分屏的N种方法

002-DOM事件实例-实现一个可以拖拽的登陆窗口相关文章