JavaScript_javascript 스킬을 기반으로 팝업박스 효과 구현
- WBOY원래의
- 2016-05-16 15:14:472005검색
팝업 상자는 웹 사이트 페이지에서 없어서는 안될 부분입니다. 오늘은 Script House 플랫폼의 도움으로 간단한 팝업 상자 효과를 얻기 위해 js를 사용하는 방법을 알려 드리겠습니다. 써놨으니 용서해주세요!
먼저 팝업 상자의 구성 요소를 분석해 보겠습니다. 간단한 팝업 상자는 헤드, 콘텐츠, 꼬리로 구분되며, 헤드에는 제목과 닫기 버튼이 있으며 콘텐츠는 그래픽, 미디어, iframe, flash 등이 있고 꼬리가 버튼(확인, 취소 등)이므로 이 예제에서는 주로 팝업 상자의 핵심 부분을 구현합니다. >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, div{
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
}
.pop {
border-radius: 5px;
background-color: #fff;
border: #eee 1px solid;
position: absolute;
width: 350px;
left: 35%;
top: 25%;
}
.pop-title {
background-image: linear-gradient(#eee,#efefef);
position: relative;
cursor: pointer;
}
.pop-title h3,.pop-title a{
display: inline-block;
}
.pop-title h3{
font-size: 14px;
margin: 0;
padding: 5px;
}
.pop-title a {
position: absolute;
top: 5px;
right: 5px;
}
.pop-content {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div>
<h3>消息</h3>
<a href="javascript:;">X</a>
</div>
<div>
弹出框已显示
</div>
<div></div>
</div>
</body>
</html>
여기서는 이동의 X 및 Y 좌표, 이동의 전환 및 금지 등 여러 변수를 생각할 수 있습니다. 그런 다음 제목에 onmousedown 및 onmouseup 이벤트를 추가합니다.
onmousedown 이벤트는 주로 움직임을 시작합니다.
onmouseup 이벤트의 논리는 주로 움직임을 닫고 팝업 상자의 움직임을 비활성화하는 것입니다.
그럼 움직여야 하고, 움직여야 할 때는 일정 범위 내에서 움직여야 합니다. 여기서는 몸체 내부에서 onmousemove 이벤트를 추가합니다. 팝업박스 위치
이 세 가지 이벤트는 주로 CSS의 위치 속성과 JS의 이벤트 이벤트 속성 좌표를 결합합니다.
var pop = document.getElementsByClassName("pop")[0];
var pop_title = pop.getElementsByClassName("pop-title")[0];
var bd = document.body;
var x = 0;
var y = 0;
var ismove = false; // 是否开启移动
var downx = 30;
var downy = 30;
pop_title.onmousedown = function (e) {
x = e.pageX;
y = e.pageY;
downx = e.offsetX;
downy = e.offsetY;
ismove = true;
}
bd.onmousemove = function (e) {
if (ismove) {
var cx = e.pageX - downx;
var cy = e.pageY - downy;
pop.style.left = cx + "px";
pop.style.top = cy + "px";
x = e.x;
y = e.y;
}
e.preventDefault();
}
pop_title.onmouseup = function (e) {
x = e.pageX;
y = e.pageY;
ismove = false;
console.log("移动完成")
}
//关闭
var pop_close = pop.getElementsByClassName("pop-close")[0];
pop_close.onclick = function () {
pop.parentNode.removeChild(pop);
}
이상으로 js를 이용한 팝업박스 효과를 소개하겠습니다. 도움이 되셨으면 좋겠습니다!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.