js实现登录拖拽窗口

这篇文章主要为大家详细介绍了js实现登录拖拽窗口,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参…

这篇文章主要为大家详细介绍了js实现登录拖拽窗口,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现登录拖拽窗口的具体代码,供大家参考,具体内容如下

做这个案例的两个关键点:

1、用js将盒子在可视区域居中显示

本可以用css将盒子用定位的方式居中显示,但是采用js的方法更好些。
方法:
盒子的left值 = (可视区域的宽度 – 盒子自身的宽度)/ 2;
盒子的top值 = (可视区域的高度 – 盒子自身的高度)/ 2;
这样盒子就居中显示

2、先鼠标按下,然后鼠标在整个文档上移动时,盒子的位置跟着鼠标移动

这一点上要注意的点:

1)鼠标按下时,鼠标相对盒子X方向的位置 = event.clienX- 盒子的offsetLeft
鼠标相对盒子Y方向的位置 = event.clientY – 盒子的offsetTop ;

2)鼠标在移动时,盒子的left值 = event.clientX – 鼠标相对盒子X方向的位置
盒子的top值 = event.clientY – 鼠标相对盒子Y方向的位置

注意 1),2)中的event.clientX/clientY不是一样的值,他们分别来自不同事件

   
   
   
   Document 登录
   

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.cfluntan.cn。

为您推荐

返回顶部