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

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
js实现模态框的拖拽效果
内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'title模态框拖拽/titlest......
<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>模态框拖拽</title>

<style>

*{

margin:0;

padding:0;

}

#link{

color:#000;

text-decoration:none;

border:1pxsolid#000;

}

.login{

width:300px;

height:200px;

background-color:antiquewhite;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

z-index:2;

display:none;

}

.login-title{

text-align:center;

width:100%;

height:40px;

line-height:40px;

background-color:aqua;

cursor:move;

}

.login-titlespan{

display:block;

height:30px;

width:30px;

background-color:antiquewhite;

line-height:30px;

border-radius:50%;

position:absolute;

top:-10px;

right:-10px;

font-size:12px;

}

.login-titlespana{

text-decoration:none;

color:#000;

}

.login-input-content{

margin:15px20px0;

line-height:30px;

}

.login-button{

width:200px;

height:20px;

margin:10pxauto;

border:1pxsolidrgb(77,73,73);

text-align:center;

}

.login-buttona{

text-decoration:none;

color:#000;

font-size:14px;

}

#bg{

display:none;

background-color:#000;

width:100%;

height:100%;

opacity:0.3;

z-index:-1;

position:absolute;

top:0;

left:0;

}

</style>

</head>

<body>

<divclass="login-header"><ahref="javascript:;"rel="externalnofollow"id="link">点击,弹出登录框</a></div>

<divclass="login"id="login">

<divclass="login-title">登录会员

<span><aid="colseBth"href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"class="close-login">关闭</a></span>

</div>

<divclass="login-input-content">

<divclass="login-input">

<labelfor="">用&nbsp;户&nbsp;名:</label>

<inputtype="text"placeholder="请输入用户名"name="info[sername]"id="username"class="username">

</div>

<divclass="login-inpit">

<labelfor="">登录密码:</label>

<inputtype="password"placeholder="请输入登录密码"name="info[password]"id="password">

</div>

</div>

<divclass="login-button"id="loginBtn"><ahref="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"id="login-button-submit">会员登录</a></div>

</div>

<!--遮罩层-->

<divclass="login-bg"id="bg"></div>

</body>

<script>

//1.点击,弹出模态框和遮罩层

//3.点击关闭模态框和遮罩层自动隐藏

//4.页面拖拽原理:鼠标按下且移动,之后松开鼠标

//5.拖拽过程:鼠标移动的时候获得新的值赋值给模态框的left和top值。

//1.获取DOM元素

varoLink=document.querySelector('#link');

varoLogin=document.querySelector('.login');

varoBg=document.querySelector('#bg');

varoClose=oLogin.querySelector('#colseBth');

vartitle=oLogin.querySelector('.login-title');

//2.点击弹出层这个链接link,让mask和login显示出来

oLink.addEventListener('click',function(){

oLogin.style.display='block';

oBg.style.display='block';

})

//3.点击closeBtn就隐藏mask和login

oClose.addEventListener('click',function(){

oLogin.style.display='none';

oBg.style.display='none';

})

//4.开始拖拽

//(1)当我们鼠标按下,就获得鼠标在盒子内的坐标

title.addEventListener('mousedown',function(e){

varx=e.pageX-oLogin.offsetLeft;

vary=e.pageY-oLogin.offsetTop;

console.log(x,y)

//(2)鼠标移动的时候,把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是模态框的left和top值

document.addEventListener('mousemove',move)

functionmove(e){

oLogin.style.left=e.pageX-x+'px';

oLogin.style.top=e.pageY-y+'px';

}

//(3)鼠标弹起,就让鼠标移动事件移除

document.addEventListener('mouseup',function(){

document.removeEventListener('mousemove',move);

})

})

</script>

</html>

上一篇:js实现淘宝固定侧边栏 下一篇:JS实现模态框拖拽动态效果
发布日期:2022/7/3
手机扫二维码直达本页
发布时间:22:13:10
点击:111
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022