您正在使用IPV4(3.92.28.52)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】爆款1核2G云服务器首年48元,还有iPad Pro、Bose耳机、京东卡等你来抽!      
虚位以待
2021年 冬至节 20
2021年 圣诞节 24
2022年 元 旦 31
2022年 春 节 62
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    原生JS实现可拖拽登录框
    内容摘要: !DOCTYPEhtmlhtmlheadmetahttp-equiv='Content-Type'content='text/html;charset=utf-8'/title原生JS实现可拖拽登录框/titlestyletype='text/css'body{/*背景图*/background:url(images/0.png)#ffftopcentern......
    <!DOCTYPEhtml>

    <html>

    <head>

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

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

    <styletype="text/css">

    body{

    /*背景图*/

    background:url(images/0.png)#ffftopcenterno-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:1pxsolid#D5D5D5;

    background:#fff;

    }

    .ui-dialoga{

    text-decoration:none;

    }

    .ui-dialog-title{

    height:48px;

    line-height:48px;

    padding:0px20px;

    color:#535353;

    font-size:16px;

    border-bottom:1pxsolid#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:15px20px;

    }

    .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:1pxsolid#d5d5d5;

    font-size:16px;

    color:#c1c1c1;

    text-indent:25px;

    outline:none;

    }

    .ui-dialog-input-username{

    /*输入用户名的图标*/

    background:url(images/4.png)no-repeat2px;

    }

    .ui-dialog-input-password{

    /*输入密码的图标*/

    background:url(images/3.png)no-repeat2px;

    }

    .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>

    <divclass="link">

    <ahref="javascript:showDialog();">登录</a>

    </div>

    <!--设置一个背景遮罩层,防止鼠标选中事件-->

    <divclass="ui-mask"id="mask"onselectstart="returnfalse"></div>

    <divclass="ui-dialog"id="dialogMove"onselectstart='returnfalse;'>

    <divclass="ui-dialog-title"id="dialogDrag"onselectstart="returnfalse;">

    登录通行证

    <aclass="ui-dialog-closebutton"href="javascript:hideDialog();"></a>

    </div>

    <divclass="ui-dialog-content">

    <divclass="ui-dialog-l40ui-dialog-pt15">

    <inputclass="ui-dialog-inputui-dialog-input-username"type="input"value="手机/邮箱/用户名"/>

    </div>

    <divclass="ui-dialog-l40ui-dialog-pt15">

    <inputclass="ui-dialog-inputui-dialog-input-password"type="input"value="密码"/>

    </div>

    <divclass="ui-dialog-l40">

    <ahref="#">忘记密码</a>

    </div>

    <div>

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

    </div>

    <divclass="ui-dialog-l40">

    <ahref="#">立即注册</a>

    </div>

    </div>

    </div>

    <scripttype="text/javascript">

    //声明获取元素对象方法

    function$(id){returndocument.getElementById(id);}

    //声明自动居中元素方法(el=Element)

    functionautoCenter(el){

    //获得网页可视区域的宽和高

    varbodyW=document.documentElement.clientWidth;

    varbodyH=document.documentElement.clientHeight;

    //获得传入元素的实际宽和高

    varelW=el.offsetWidth;

    varelH=el.offsetHeight;

    //设置元素的left为可视区域的宽度减去自身宽度的值除以2,top同理

    el.style.left=(bodyW-elW)/2+'px';

    el.style.top=(bodyH-elH)/2+'px';

    }

    //自动扩展元素到全部显示区域

    functionfillToBody(el){

    //设置当前元素的宽度和高度为可视区域的宽和高

    el.style.width=document.documentElement.clientWidth+'px';

    el.style.height=document.documentElement.clientHeight+'px';

    }

    //设定鼠标在X和Y方向的初始值为0

    varmouseOffsetX=0;

    varmouseOffsetY=0;

    //是否可拖拽的标记

    varisDraging=false;

    //鼠标事件1——计算鼠标相对拖拽元素的左上角的坐标,并且标记元素为可扡动

    $('dialogDrag').addEventListener('mousedown',function(e){

    //兼容IE鼠标事件机制

    vare=e||window.event;

    //鼠标的偏移等于当前事件鼠标按下去的时候X的坐标减去登录浮层相对于页面左边的位置

    mouseOffsetX=e.pageX-$('dialogMove').offsetLeft;

    //鼠标的偏移等于当前事件鼠标按下去的时候Y的坐标减去登录浮层相对于页面顶边的位置

    mouseOffsetY=e.pageY-$('dialogMove').offsetTop;

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

    isDraging=true;

    })

    //鼠标事件2——鼠标移动时,检测元素是否标记为可移动,

    //如果是,则更新元素的位置,到当前鼠标的位置(要减去第一步中获得的偏移)

    document.onmousemove=function(e){

    //兼容IE鼠标事件机制

    vare=e||window.event;

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

    varmouseX=e.pageX;

    varmouseY=e.pageY;

    //记录鼠标移动事件发生时的x坐标和y坐标

    varmoveX=0;

    varmoveY=0;

    //如果当前可以拖动

    if(isDraging===true){

    //拖动元素的位置等于鼠标相对于页面位置减去鼠标相对于拖动元素左上角的位置

    moveX=mouseX-mouseOffsetX;

    moveY=mouseY-mouseOffsetY;

    //获取页面最大宽度和最大高度(注意clientWidth和offsetWidth的区别)

    varpageWidth=document.documentElement.clientWidth;

    varpageHeight=document.documentElement.clientHeight;

    //浮层对象的宽度和高度

    vardialogWidth=$('dialogMove').offsetWidth;

    vardialogHeight=$('dialogMove').offsetHeight;

    //计算可拖动的最大值

    varmaxX=pageWidth-dialogWidth;

    varmaxY=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;

    }

    //展现登录框

    functionshowDialog(){

    $('dialogMove').style.display='block';

    $('mask').style.display='block';

    //登录框居中显示

    autoCenter($('dialogMove'));

    //设置遮罩层充满显示区域

    fillToBody($('mask'))

    }

    //隐藏登录框

    functionhideDialog(){

    $('dialogMove').style.display='none';

    $('mask').style.display='none';

    }

    //当改变窗口大小时的处理函数

    window.onresize=function(){

    //登录框居中显示

    autoCenter($('dialogMove'));

    //如果登录框显示就执行遮罩层显示函数

    if($('dialogMove').style.display==='block'){

    fillToBody($('mask'))

    }

    }

    </script>

    </body>

    </html>

    版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:css 边框添加四个角的实现代码 下一篇:CSS实现半透明div层的方法
    发布日期:2021/10/19
    手机扫二维码直达本页
    发布时间:14:45:35
    点击:210
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.0.9.10888 Build 21.11.30(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
    ©2000-2021