您正在使用 IPV4 [54.160.133.33] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
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
点  击:9
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....