• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

原生JS实现可拖拽登录框

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文分享一个用原生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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript给事件委托批量添加事件监听详细流程发布时间:2022-02-05
下一篇:
JavaScript中var let const的用法有哪些区别发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap