用rp怎样做网站,网站开发有什么技术要求,wordpress 购物导航网站,网络运营需要什么学历目录
一、需求描述
二、实现效果
三、完整代码
四、实现过程
1、HTML 页面结构
2、CSS 元素样式
3、JavaScript动态控制
#xff08;1#xff09;获取元素
#xff08;2#xff09;显示\隐藏遮罩层与模态框
#xff08;3#xff09;实现模态框拖动效果 一、需求…目录
一、需求描述
二、实现效果
三、完整代码
四、实现过程
1、HTML 页面结构
2、CSS 元素样式
3、JavaScript动态控制
1获取元素
2显示\隐藏遮罩层与模态框
3实现模态框拖动效果 一、需求描述
实现一个可以拖拽的模态框
点击打开按钮显示模态框和遮罩层点击关闭按钮或遮罩层隐藏模态框和遮罩层在模态框的标题栏按下并移动鼠标模态框跟随鼠标移动拖拽效果
二、实现效果
1、点击按钮显示遮罩层和模态框 2、在模态框标题栏按下并移动鼠标模态框跟随移动 3、点击关闭按钮或者遮罩层隐藏模态框 三、完整代码
【test.html】
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title可拖拽的模态框/titlestyle* {margin: 0;padding: 0;caret-color: transparent;}.open-btn {display: inline-block;margin: 60px;padding: 10px 20px;font-size: 16px;color: #fff;background-color: #409eff;border: none;border-radius: 8px;}.modal-box {display: none;position: fixed;top: 120px;left: 60px;width: 400px;min-height: 200px;padding: 10px;background: #fff;border-radius: 8px;box-shadow: 0 0 4px 1px #acacac;z-index: 99999;}.modal-title {text-align: center;font-size: 18px;font-weight: 700;padding: 20px;border-bottom: 1px solid #ddd;cursor: move;}.modal-body {margin: 20px 0;}.close-btn {position: absolute;top: 6px;right: 6px;width: 18px;height: 18px;background-image: url(D:\\test\\close.svg);background-size: cover;}.mask {display: none;width: 100vw;height: 100vh;position: fixed;top: 0px;left: 0px;background: rgba(0, 0, 0, .3);}/style
/headbodybutton classopen-btn打开模态框/buttondiv classmask/divdiv classmodal-boxdiv classmodal-title一个可以拖拽的模态框/divdiv classmodal-body内容区域不能拖到/divdiv classclose-btn //div
/body
script// 获取打开按钮var openBtn document.querySelector(.open-btn);// 获取模态框var modalBox document.querySelector(.modal-box);// 获取模态框标题var modalTitle document.querySelector(.modal-title)// 获取关闭按钮var closeBtn document.querySelector(.close-btn);// 获取遮罩层var maskBox document.querySelector(.mask);// 2、显示\隐藏遮罩层与模态框// 2.1、点击打开按钮显示模态框和遮罩层openBtn.addEventListener(click, function () {maskBox.style.display block;modalBox.style.display block;})// 2.2、点击关闭按钮 或者遮罩层 隐藏模态框和遮罩层closeBtn.addEventListener(click, function () {maskBox.style.display none;modalBox.style.display none;})maskBox.addEventListener(click, function () {maskBox.style.display none;modalBox.style.display none;})// 3、拖动模态框// 3.1 鼠标按下modalTitle.addEventListener(mousedown, function (e) {// 获取鼠标起始位置坐标var mouseX e.pageX;var mouseY e.pageY;// 模态框的初始左边距 上边距var modalBoxX modalBox.offsetLeft;var modalBoxY modalBox.offsetTop;// 3.2 鼠标移动 计算模态框的移动距离modalTitle.addEventListener(mousemove, moveMouse);// 3.3 鼠标弹起 移除鼠标移动事件modalTitle.addEventListener(mouseup, function () {modalTitle.removeEventListener(mousemove, moveMouse)})// 鼠标移动事件回调function moveMouse(e) {// 模态框移动的边距 模态框的起始边距 鼠标的相对移动值;modalBox.style.left modalBoxX (e.pageX - mouseX) px;modalBox.style.top modalBoxY (e.pageY - mouseY) px;}})
/script/html
四、实现过程
1、HTML 页面结构
一个按钮【button元素】用来点击显示模态框和遮罩层一个遮罩层【div元素】一个模态框【div元素】其中包含模态框的标题【div元素】、内容【div元素】和关闭按钮【div元素】
bodybutton classopen-btn打开模态框/buttondiv classmask/divdiv classmodal-boxdiv classmodal-title一个可以拖拽的模态框/divdiv classmodal-body内容区域不能拖到/divdiv classclose-btn //div
/body
2、CSS 元素样式
1按钮样式
根据自己的喜好自行添加按钮的样式即可
.open-btn {display: inline-block;margin: 60px;padding: 10px 20px;font-size: 16px;color: #fff;background-color: #409eff;border: none;border-radius: 8px;
} 2遮罩层样式
先不用设置遮罩层的display为none先让它显示出来便于观察设置遮罩层的宽高分别为 100vw 和 100vh 占满浏览器的整个窗口根据浏览器窗口大小自适应始终占满遮罩层使用固定定位【 position: fixed; 】使其不受其他元素的位置影响
.mask {/* display: none; */position: fixed;top: 0px;left: 0px;width: 100vw;height: 100vh;background: rgba(0, 0, 0, .3);
} 3模态框样式
模态框跟遮罩层一样不用设置display为none模态框也使用固定定位【 position: fixed; 】使其不受其他元素的位置影响模态框的标题设置cursor属性为move当鼠标移动到模态框的标题位置时会显示移动样式模态框的关闭按钮使用的是div元素将其定位到模态框的右上角并设置其背景为svg图标
.modal-box {/* display: none; */position: fixed;top: 120px;left: 60px;width: 400px;min-height: 200px;padding: 10px;background: #fff;border-radius: 8px;box-shadow: 0 0 4px 1px #acacac;z-index: 99999;
}
.modal-title {text-align: center;font-size: 18px;font-weight: 700;padding: 20px;border-bottom: 1px solid #ddd;cursor: move;
}.modal-body {margin: 20px 0;
}.close-btn {position: absolute;top: 6px;right: 6px;width: 18px;height: 18px;background-image: url(D:\\test\\close.svg);background-size: cover;
} 3、JavaScript动态控制
1获取元素
将页面中需要操作的元素都进行获取
这里使用的是querySelector()方法来获取元素是JavaScript中获取dom元素的方式之一
script// 1、获取页面元素// 获取打开按钮var openBtn document.querySelector(.open-btn);// 获取模态框var modalBox document.querySelector(.modal-box);// 获取模态框标题var modalTitle document.querySelector(.modal-title)// 获取关闭按钮var closeBtn document.querySelector(.close-btn);// 获取遮罩层var maskBox document.querySelector(.mask);......
/script
2显示\隐藏遮罩层与模态框
在控制遮罩层和模态框的显示与隐藏之前需要先将其display属性设为none
.mask {display: none;......
}.modal-box {display: none;......
}
根据案例需求可以知道
遮罩层和模态框的显示与隐藏是同时的模态框显示则遮罩层显示模态框隐藏则遮罩层隐藏当点击【打开模态框】按钮时进行显示所以需要给这个按钮注册点击事件完成相应功能当点击模态框中的【关闭按钮】或者遮罩层时进行隐藏所以需要给关闭按钮和遮罩层都注册鼠标点击事件完成相应功能
script......// 2、显示\隐藏遮罩层与模态框// 2.1、点击打开按钮显示模态框和遮罩层openBtn.addEventListener(click, function () {maskBox.style.display block;modalBox.style.display block;})// 2.2、点击关闭按钮 或者遮罩层 隐藏模态框和遮罩层closeBtn.addEventListener(click, function () {maskBox.style.display none;modalBox.style.display none;})maskBox.addEventListener(click, function () {maskBox.style.display none;modalBox.style.display none;})......
/script
3实现模态框拖动效果
根据案例需求,分析可知
模态框采用的是固定定位【 position: fixed;】改变其 top 和 left 值就相当于是在移动了模态框的移动距离实际就是鼠标的移动距离加上模态框的起始位置坐标鼠标的移动距离实际就是鼠标按下的位置与鼠标移动时位置的差值
注册 mousedown 事件鼠标按下得到鼠标在模态框内的坐标即起始位置
注册 mousemove 事件鼠标移动获得最新的鼠标位置计算移动距离
注册 mouseup 事件鼠标弹起停止拖拽解除鼠标移动事件
注意
mousedown 、mousemove 、mouseup 触发的事件源是模态框的标题栏mousemove、mouseup 是在鼠标按下事件的基础上 要写到mousedown 事件里面
script......// 3、拖动模态框// 3.1 鼠标按下modalTitle.addEventListener(mousedown, function (e) {// 获取鼠标起始位置坐标var mouseX e.pageX;var mouseY e.pageY;// 模态框的初始左边距 上边距var modalBoxX modalBox.offsetLeft;var modalBoxY modalBox.offsetTop;// 3.2 鼠标移动 计算模态框的移动距离modalTitle.addEventListener(mousemove, moveMouse);// 3.3 鼠标弹起 移除鼠标移动事件modalTitle.addEventListener(mouseup, function() {modalTitle.removeEventListener(mousemove, moveMouse)})// 鼠标移动事件回调function moveMouse(e) {// 模态框移动的边距 模态框的起始边距 鼠标的相对移动值;modalBox.style.left modalBoxX (e.pageX - mouseX) px;modalBox.style.top modalBoxY (e.pageY - mouseY) px;}})
/script 每天进步一点点~
记录下前端这个一个小知识~~
