이 기사는 드래그 앤 드롭 아름다운 둥근 코너 특수 효과 팝업 레이어를 구현하기위한 JS+CSS의 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 세부 사항은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
JS+CSS에 의해 구현 된 아름다운 둥근 코너 효과가있는 <Title> 팝 레이어 </title>
<스타일>
몸{
여백 : 0px;
패딩 : 0px;
글꼴 크기 : 14px;
}
#T {
위치 : 절대;
플로트 : 왼쪽;
왼쪽 : 0px;
상단 : 0px;
}
#a {
플로트 : 왼쪽;
}
.al {
불투명도 : 0.80;
필터 : progid : dximagetransform.microsoft.alpha (style = 0, 불투명도 = 80, finishopacity = 100);
}
.al2 {
불투명도 : 0.00;
필터 : progid : dximagetransform.microsoft.alpha (style = 0, 불투명도 = 0, finishopacity = 100);
}
u {
디스플레이 : 블록;
오버플로 : 숨겨진;
높이 : 1px
}
U.f1 {
배경색 :#5CC;
배경 : #5CC;
마진 : 0px 3px
}
U.f2 {
배경색 :#5CC;
경계 오른쪽 : #5cc 2px 고체;
마진 : 0px 1px;
왼쪽 경계 : #5cc 2px 고체
}
U.f3 {
배경색 :#5CC;
경계 오른쪽 : #5cc 1px 고체;
마진 : 0px 1px;
왼쪽 경계 : #5cc 1px 고체
}
.d_top {
Clear : 둘 다;
오버플로 : 숨겨진;
배경색 :#5CC;
높이 : 29px;
수직 정상 : 바닥;
}
.d_top a {
플로트 : 오른쪽;
마진-탑 : 5px;
마진 오른쪽 : 13px;
패딩 탑 : 3px;
너비 : 18px;
색상 : 빨간색;
배경색 :#789;
텍스트 결정 : 없음;
글꼴 중량 : 대담한;
텍스트 정렬 : 센터;
수직 정상 : 중간;
}
.d_top span {
플로트 : 왼쪽;
글꼴 크기 : 13px;
마진 왼쪽 : 15px;
마진-탑 : 8px;
}
.d_body {
경계 오른쪽 : #5cc 3px 고체;
왼쪽 경계 : #5cc 3px 고체;
패딩 : 10px;
높이 : 200px;
배경색 : #ffff;
}
.d_foot {
Clear : 둘 다;
오버플로 : 숨겨진;
배경색 :#5CC;
높이 : 2px;
}
</스타일>
<script type = "text/javaScript">
function $ (id) {return document.getElementById (id);}
함수 쇼 (id) {
var t = $ (id);
t.style.width = document.body.clientWidth;
t.style.height = document.body.clientHeight;
Window.onResize = function () {
t.style.width = document.body.clientWidth;
t.style.height = document.body.clientHeight;
}
$ (id) .style.display = "";
}
함수 cl (id) {
$ (id) .style.display = "none";
}
함수 moveEvent (e, id) {
var isie = (document.all)? true : false;
drag = true;
xx = isie? event.x : e.pagex;
yy = isie? event.y : e.pagey;
l = document.getElementById (id) .OffSetLeft;
t = document.getElementById (id) .OffSetTop;
document.onmouseMove = function (e) {
if (drag) {
x = isie? event.x : e.pagex; if (x <0) x = 0;
y = isie? event.y : e.pagey; if (y <0) y = 0;
document.getElementById (id) .style.left = l-xx+x;
document.getElementById (id) .style.top = t-yy+y;
}
}
document.onmouseup = function () {
drag = false;
}
}
window.onscroll = function () {
$ ( "back_div"). style.width = document.body.scrollwidth;
$ ( "back_div"). style.height = document.body.scrollheight;
}
</스크립트>
</head>
<body>
<div id = "a"style = "위치 : 절대; 왼쪽 : 300px; 상단 : 200px;">
<a href = "javaScript :"onclick = "show ( 't')"> 둥근 코너 효과로 div를 팝업하려면 여기를 클릭하십시오. </div>
<div id = "t"style = "display : none;">
<div id = "back_div">
<iframe style = "위치 : 절대; 왼쪽; 왼쪽 : 0px; 상단 : 0px; 왼쪽 : 0px; 맨 아래 : 0px; float : 왼쪽; Z-index : -1; 마진 : 0px; 패딩 : 0px;" Frameborder = "0"scrolling = "no"id = "ifr"> </iframe>
</div>
<div style = "너비 : 500px; 위치 : 절대; 플로트 : 왼쪽; 상단 : 25%; 왼쪽 : 30%; z-index : 999; Clear : 둘 다; 오버플로 : 숨겨진;" id = "t_div">
<iframe style = "위치 : 절대; 왼쪽; 왼쪽 : 0px; 상단 : 0px; 왼쪽 : 0px; 맨 아래 : 0px; float : 왼쪽; Z-index : -1; 마진 : 0px; 패딩 : 0px;" Frameborder = "0"scrolling = "no"id = "ifr"> </iframe>
<u> </u> <u> </u> <u> </u>
<div onmousedown = "moveEvent (이벤트, 't_div')">
<span> 환영 </span>
<a href = "javaScript :"onclick = "cl ( 't')"> </a>
</div>
<div> 오신 것을 환영합니다 : wulin.com
</div>
<div> </div>
<u> </u> <u> </u> <u> </u>
</div>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.