拖拽框.原生JavaScript+HTML实现

功能实现:鼠标在登录框的头部按下拖拽,整个登录框就可以跟着鼠标移动,鼠标键弹起,登录框固定位置,里面还有一个小功能,就是点击登录跳出登录框,背景颜色变灰色,点击关闭,登录框返回最初的页面.

看一下效果图

拖拽框.原生JavaScript+HTML实现_第1张图片

 思路:完成拖拽效果需要求出鼠标在盒子内部的位置跟鼠标移动时盒子的位置,得到这两个数据,就可以配合鼠标事件完成拖拽的效果

 鼠标在盒子内部的位置很好求= 只用将鼠标距离屏幕左边的距离 - 登录框距离屏幕左边的距离

求出鼠标移动时盒子的位置 = 鼠标距离左边屏幕的距离 - 鼠标距离登录框左边框的距离

因为鼠标位置变化,所以盒子位置也跟着变化,就实现了拖拽功能!

同理距离顶部的位置也是一个方法求!!!!

拖拽框.原生JavaScript+HTML实现_第2张图片

分析完了,接下来看代码,代码很简单,短短几行!

 下面时基础的css样式代码跟html

说明一下实现点击登录跳转功能是两个a链接在#和空白之间来回跳转,因为关闭按钮a标签没有给路径所以点击时回跳回原来页面.

拖拽框.原生JavaScript+HTML实现_第3张图片

点击登录

登录

用户名:
密   码:

你可能感兴趣的:(原生js,javascript,html5,html,css)