原生JS实现可拖拽登录框

2024-12-04 00:19:07

本文分享一个用原生JS实现的可拖拽登录框，效果如下：

实现的代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>原生JS实现可拖拽登录框</title>

    <style type="text/css">
        body {
            /* 背景图 */
            background: url(images/0.png) #fff top center no-repeat;
            padding: 0px;
            margin: 0px;
            font-size: 12px;
            font-family: "微软雅黑";
        }

        .link {
            text-align: right;
            line-height: 20px;
            padding-right: 40px;
        }

        .ui-dialog {
            width: 380px;
            height: auto;
            display: none;
            position: absolute;
            z-index: 9000;
            top: 0px;
            left: 0px;
            border: 1px solid #D5D5D5;
            background: #fff;
        }

        .ui-dialog a {
            text-decoration: none;
        }

        .ui-dialog-title {
            height: 48px;
            line-height: 48px;
            padding: 0px 20px;
            color: #535353;
            font-size: 16px;
            border-bottom: 1px solid #efefef;
            background: #f5f5f5;
            cursor: move;
            user-select: none;
        }

        .ui-dialog-closebutton {
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            top: 12px;
            right: 20px;
            /* 关闭登录框的图标 */
            background: url(images/1.png) no-repeat;
            cursor: pointer;

        }

        .ui-dialog-closebutton:hover {
            /* 关闭登录框鼠标悬停时的图标 */
            background: url(images/2.png);
        }

        .ui-dialog-content {
            padding: 15px 20px;
        }

        .ui-dialog-pt15 {
            padding-top: 15px;
        }

        .ui-dialog-l40 {
            height: 40px;
            line-height: 40px;
            text-align: right;
        }

        .ui-dialog-input {
            width: 100%;
            height: 40px;
            margin: 0px;
            padding: 0px;
            border: 1px solid #d5d5d5;
            font-size: 16px;
            color: #c1c1c1;
            text-indent: 25px;
            outline: none;
        }

        .ui-dialog-input-username {
            /* 输入用户名的图标 */
            background: url(images/4.png) no-repeat 2px;
        }

        .ui-dialog-input-password {
            /* 输入密码的图标 */
            background: url(images/3.png) no-repeat 2px;
        }

        .ui-dialog-submit {
            width: 100%;
            height: 50px;
            background: #3b7ae3;
            border: none;
            font-size: 16px;
            color: #fff;
            outline: none;
            text-decoration: none;
            display: block;
            text-align: center;
            line-height: 50px;
        }

        .ui-dialog-submit:hover {
            background: #3f81b0;
        }

        .ui-mask {
            width: 100%;
            height: 100%;
            background: #000;
            position: absolute;
            top: 0px;
            height: 0px;
            z-index: 8000;
            opacity: 0.4;

            /*兼容低版本的ie*/
            filter: Alpha(opacity=40);
        }
    </style>
</head>

<body>

    <div class="link">
        <a href="javascript:showDialog();" >登录</a>
    </div>

    <!-- 设置一个背景遮罩层,防止鼠标选中事件 -->
    <div class="ui-mask" id="mask" onselectstart="return false"></div>

    <div class="ui-dialog" id="dialogMove" onselectstart='return false;'>

        <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
            登录通行证
            <a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></a>
        </div>

        <div class="ui-dialog-content">

            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-username" type="input" value="手机/邮箱/用户名" />
            </div>

            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-password" type="input" value="密码" />
            </div>

            <div class="ui-dialog-l40">
                <a href="#" >忘记密码</a>
            </div>

            <div>
                <a class="ui-dialog-submit" href="#" >登录</a>
            </div>

            <div class="ui-dialog-l40">
                <a href="#" >立即注册</a>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        //声明获取元素对象方法
        function $(id) { return document.getElementById(id); }

        //声明自动居中元素方法（el = Element）
        function autoCenter(el) {

            //获得网页可视区域的宽和高
            var bodyW = document.documentElement.clientWidth;
            var bodyH = document.documentElement.clientHeight;

            //获得传入元素的实际宽和高
            var elW = el.offsetWidth;
            var elH = el.offsetHeight;

            //设置元素的left为可视区域的宽度减去自身宽度的值除以2,top同理
            el.style.left = (bodyW - elW) / 2 + 'px';
            el.style.top = (bodyH - elH) / 2 + 'px';

        }

        //自动扩展元素到全部显示区域
        function fillToBody(el) {

            //设置当前元素的宽度和高度为可视区域的宽和高
            el.style.width = document.documentElement.clientWidth + 'px';
            el.style.height = document.documentElement.clientHeight + 'px';
        }

        //设定鼠标在X和Y方向的初始值为0
        var mouseOffsetX = 0;
        var mouseOffsetY = 0;

        //是否可拖拽的标记
        var isDraging = false;

        //鼠标事件1——计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可扡动
        $('dialogDrag').addEventListener('mousedown', function (e) {

            //兼容IE鼠标事件机制
            var e = e || window.event;

            //鼠标的偏移等于当前事件鼠标按下去的时候X 的坐标减去登录浮层相对于页面左边的位置
            mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;

            //鼠标的偏移等于当前事件鼠标按下去的时候Y的坐标减去登录浮层相对于页面顶边的位置
            mouseOffsetY = e.pageY - $('dialogMove').offsetTop;

            //设置可拖动标记为true;
            isDraging = true;

        })

        //鼠标事件2——鼠标移动时，检测元素是否标记为可移动，
        //如果是，则更新元素的位置，到当前鼠标的位置(要减去第一步中获得的偏移)
        document.onmousemove = function (e) {

            //兼容IE鼠标事件机制
            var e = e || window.event;

            //获取鼠标当前页面(网页左上角)的位置,e.pageX与e.pageY与鼠标按下时值不同
            var mouseX = e.pageX;
            var mouseY = e.pageY;

            //记录鼠标移动事件发生时的x坐标和y坐标
            var moveX = 0;
            var moveY = 0;

            //如果当前可以拖动
            if (isDraging === true) {

                //拖动元素的位置等于鼠标相对于页面位置减去鼠标相对于拖动元素左上角的位置
                moveX = mouseX - mouseOffsetX;
                moveY = mouseY - mouseOffsetY;

                //获取页面最大宽度和最大高度(注意clientWidth和offsetWidth的区别)
                var pageWidth = document.documentElement.clientWidth;
                var pageHeight = document.documentElement.clientHeight;

                //浮层对象的宽度和高度
                var dialogWidth = $('dialogMove').offsetWidth;
                var dialogHeight = $('dialogMove').offsetHeight;

                //计算可拖动的最大值
                var maxX = pageWidth - dialogWidth;
                var maxY = pageHeight - dialogHeight;

                //做判断，防止拖拽出允许范围
                moveX = Math.min(maxX, Math.max(0, moveX));
                moveY = Math.min(maxY, Math.max(0, moveY));

                //设置拖动元素的新值
                $('dialogMove').style.left = moveX + 'px';
                $('dialogMove').style.top = moveY + 'px';

            }

        }

        //鼠标事件3——鼠标松开的时候，标记元素为不可扡动
        document.onmouseup = function () {
            isDraging = false;
        }

        //展现登录框
        function showDialog() {
            $('dialogMove').style.display = 'block';
            $('mask').style.display = 'block';

            //登录框居中显示
            autoCenter($('dialogMove'));

            //设置遮罩层充满显示区域
            fillToBody($('mask'))

        }
        //隐藏登录框
        function hideDialog() {
            $('dialogMove').style.display = 'none';
            $('mask').style.display = 'none';
        }

        //当改变窗口大小时的处理函数
        window.onresize = function () {

            //登录框居中显示
            autoCenter($('dialogMove'));

            //如果登录框显示就执行遮罩层显示函数
            if ($('dialogMove').style.display === 'block') {
                fillToBody($('mask'))
            }

        }
    </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现百度登录框鼠标拖拽效果

以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照
Javascript实现登录框拖拽效果

本文实例为大家分享了Javascript实现登录框拖拽效果的具体代码,供大家参考,具体内容如下需求分析 1.点击弹出登录框 2.在登录框的特定区域可以将登录框拖拽至任意位置 3.可以关闭登录框,并且下一次点击弹出登录框归位具体实现完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
js实现登录框鼠标拖拽效果

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i
原生JS实现可拖拽登录框

本文分享一个用原生JS实现的可拖拽登录框,效果如下: 实现的代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现可拖拽登录框</title> <style type="text/css"
jQuery实现鼠标拖拽登录框移动效果

本文实例为大家分享了jQuery鼠标拖拽登录框移动的具体代码,供大家参考,具体内容如下 1.jQuery代码 <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { // 点击登录跳转 $(
原生js实现可拖动的登录框效果

实现原理 1.onmousemove事件触发时不断更新鼠标的pageXY改变位置, 登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离 2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离,再设置true允许拖拽 3.onmouseup 鼠标弹起设置false停止拖拽 4.登录框居中显示公式:(可视区域宽高-登录框宽高)/2 5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示代码中有详细的注释完整代码 <!DOCTYPE html PUBL
原生js实现九宫格拖拽换位

使用原生JS写出一个九宫格,实现九个格子何以拖拽换位的效果,供大家参考,具体内容如下效果演示具体思路分析和代码: 图解1: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
原生js实现可拖拽效果

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可拖拽特效</title> <style type="text/css"> *{margin: 0;padding: 0;} .header{width:100%;height:30px;backgrou
原生js实现自由拖拽弹窗代码demo

本文为大家分享了原生弹窗拖拽代码demo,供大家参考,具体内容如下效果图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗拖拽</title> <style> *{margin:0;padding:0;} .box{position: absolute;width: 400
vuejs2.0运用原生js实现简单拖拽元素功能

本文实例为大家分享了vuejs2.0实现简单拖拽元素功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <me
原生JS实现圆环拖拽效果

最近用原生JS写一个环形的鼠标滑动效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0;} div{width:50px;height:50px;border-radius:50%;positio
Vue实现拖拽穿梭框功能四种方式实例详解

目录一.使用原生js实现拖拽二.VUe使用js实现拖拽穿梭框三.Vue 拖拽组件 vuedraggable 四.Awe-dnd指令封装一.使用原生js实现拖拽 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue;
纯JS实现可拖拽表单的简单实例

因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然

原生JS实现可拖拽登录框

相关推荐

随机推荐