บทความนี้อธิบายถึงวิธีการของ 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> เลเยอร์ป๊อปที่มีเอฟเฟกต์มุมโค้งมนสวยงามนำมาใช้โดย JS+CSS </title>
<style>
ร่างกาย{
มาร์จิ้น: 0px;
Padding: 0px;
ขนาดตัวอักษร: 14px;
-
#t {
ตำแหน่ง: สัมบูรณ์;
ลอย: ซ้าย;
ซ้าย: 0px;
ด้านบน: 0px;
-
#a {
ลอย: ซ้าย;
-
.AL {
ความทึบ: 0.80;
ตัวกรอง: progid: dximagetransform.microsoft.alpha (style = 0, opacity = 80, finishOpacity = 100);
-
.AL2 {
ความทึบ: 0.00;
ตัวกรอง: progid: dximagetransform.microsoft.alpha (style = 0, opacity = 0, finishOpacity = 100);
-
คุณ {
แสดง: บล็อก;
ล้น: ซ่อน;
ความสูง: 1px
-
U.F1 {
พื้นหลังสี:#5cc;
ความเป็นมา: #5cc;
มาร์จิ้น: 0px 3px
-
U.F2 {
พื้นหลังสี:#5cc;
ชายแดนขวา: #5cc 2px Solid;
มาร์จิ้น: 0px 1px;
ชายแดนซ้าย: #5cc 2px Solid
-
U.F3 {
พื้นหลังสี:#5cc;
ชายแดนขวา: #5cc 1px Solid;
มาร์จิ้น: 0px 1px;
ชายแดนซ้าย: #5cc 1px Solid
-
.D_TOP {
ชัดเจน: ทั้งสอง;
ล้น: ซ่อน;
พื้นหลังสี:#5cc;
ความสูง: 29px;
แนวตั้ง-แนว: ด้านล่าง;
-
.d_top a {
ลอย: ขวา;
ระยะขอบด้านบน: 5px;
มาร์จิ้น-ขวา: 13px;
Padding-Top: 3px;
ความกว้าง: 18px;
สี: สีแดง;
พื้นหลังสี:#789;
การตกแต่งข้อความ: ไม่มี;
Font-Weight: ตัวหนา;
TEXT-ALIGN: CENTER;
แนวตั้ง-แนว: กลาง;
-
.D_TOP Span {
ลอย: ซ้าย;
ขนาดตัวอักษร: 13px;
ขอบซ้าย: 15px;
ระยะขอบด้านบน: 8px;
-
.d_body {
ชายแดนขวา: #5cc 3px Solid;
ชายแดนซ้าย: #5cc 3px Solid;
Padding: 10px;
ความสูง: 200px;
พื้นหลังสี: #FFFF;
-
.d_foot {
ชัดเจน: ทั้งสอง;
ล้น: ซ่อน;
พื้นหลังสี:#5cc;
ความสูง: 2px;
-
</style>
<script type = "text/javascript">
ฟังก์ชั่น $ (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 = "ไม่มี";
-
ฟังก์ชั่น MoveVent (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) {
ถ้า (ลาก) {
x = isie? event.x: e.pagex; ถ้า (x <0) x = 0;
y = isie? event.y: e.pagey; ถ้า (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;
-
</script>
</head>
<body>
<div id = "a" style = "ตำแหน่ง: สัมบูรณ์; ซ้าย: 300px; top: 200px;">
<a href = "JavaScript:" onclick = "show ('t')"> คลิกที่นี่เพื่อปรากฏขึ้น div ด้วยเอฟเฟกต์มุมโค้งมน </a> <a href = '// www.vevb.com/' target = '_ blank'> <u> กล่องโต้ตอบ </a> </a>! </div>
<div id = "t" style = "จอแสดงผล: ไม่มี;">
<div id = "back_div">
<iframe style = "ตำแหน่ง: Absolute; ซ้าย: 0PX; TOP: 0PX; ซ้าย: 0PX; ด้านล่าง: 0PX; Float: ซ้าย; frameBorder = "0" scrolling = "no" id = "ifr"> </iframe>
</div>
<div style = "ความกว้าง: 500px; ตำแหน่ง: สัมบูรณ์; ลอย: ซ้าย; ด้านบน: 25%; ซ้าย: 30%; z-index: 999; ชัดเจน: ทั้งสอง; ล้น: ซ่อน;" id = "t_div">
<iframe style = "ตำแหน่ง: Absolute; ซ้าย: 0PX; TOP: 0PX; ซ้าย: 0PX; ด้านล่าง: 0PX; Float: ซ้าย; 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 ของทุกคน