تصف هذه المقالة طريقة JS+CSS لتنفيذ طبقة منبثقة من المنبثقة ذات الأثر المنبثقة للركن. شاركه للرجوع إليه. التفاصيل كما يلي:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<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 ؛
الحشو: 0px ؛
حجم الخط: 14px ؛
}
#T {
الموقف: مطلق ؛
تعويم: اليسار.
اليسار: 0px ؛
أعلى: 0px ؛
}
#أ {
تعويم: اليسار.
}
.ال {
العتامة: 0.80 ؛
Filter: progid: dximageTransform.microsoft.alpha (النمط = 0 ، عتامة = 80 ، الانتهاء = 100) ؛
}
.al2 {
العتامة: 0.00 ؛
Filter: progid: dximageTransform.microsoft.alpha (النمط = 0 ، عتامة = 0 ، الانتهاء = 100) ؛
}
ش {
العرض: كتلة ؛
الفائض: مخفي.
الارتفاع: 1 بكسل
}
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 {
واضح: كلاهما ؛
الفائض: مخفي.
لون الخلفية:#5cc ؛
الارتفاع: 29px ؛
المحاذاة الرأسية: أسفل.
}
.d_top a {
تعويم: صحيح.
الهامش: 5 بكسل ؛
الهامش اليمين: 13px ؛
حشو أعلى: 3 بكسل ؛
العرض: 18 بكسل ؛
اللون: أحمر.
لون الخلفية:#789 ؛
تدمير النص: لا شيء ؛
خط الرصيف: جريئة ؛
محاذاة النص: المركز ؛
المحاذاة الرأسية: الأوسط ؛
}
.d_top span {
تعويم: اليسار.
حجم الخط: 13px ؛
الهامش اليساري: 15px ؛
الهامش: 8px ؛
}
.d_body {
الحدود اليمين: #5cc 3px الصلبة ؛
الحدود اليسرى: #5cc 3px الصلبة ؛
الحشو: 10 بكسل ؛
الارتفاع: 200 بكسل ؛
خلفية اللون: #ffff ؛
}
.d_foot {
واضح: كلاهما ؛
الفائض: مخفي.
لون الخلفية:#5cc ؛
الارتفاع: 2px ؛
}
</style>
<script type = "text/javaScript">
الدالة $ (id) {return document.getElementById (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" ؛
}
وظيفة moveVent (e ، id) {
var isie = (document.all)؟ True: false ؛
السحب = صواب ؛
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 () {
السحب = خطأ ؛
}
}
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 ؛ أعلى: 200px ؛">
<a href = "javaScript:" onClick = "show ('t')"> انقر هنا لتركيب Div مع تأثير الزاوية المدورة </a> <a href = '// www.vevb.com/' target = '_ blank'> <u> مربع الحوار </u> </a> </a>! </div>
<div id = "t" style = "display: none ؛">
<div id = "back_div">
<iframe style = "الموضع: المطلق ؛ اليسار: 0px ؛ الأعلى: 0px ؛ اليسار: 0px ؛ القاع: 0px ؛ تعويم: اليسار ؛ z-index: -1 ؛ الهامش: 0px ؛ padding: 0px ؛" FrameBorder = "0" scrolling = "no" id = "ifr"> </frame>
</div>
<div style = "العرض: 500px ؛ الموضع: المطلق ؛ عائم: يسار ؛ الأعلى: 25 ٪ ؛ اليسار: 30 ٪ ؛ z-index: 999 ؛ واضح: كلاهما ؛ تجاوز: مخفي ؛" id = "t_div">
<iframe style = "الموضع: المطلق ؛ اليسار: 0px ؛ الأعلى: 0px ؛ اليسار: 0px ؛ القاع: 0px ؛ تعويم: اليسار ؛ z-index: -1 ؛ الهامش: 0px ؛ padding: 0px ؛" FrameBorder = "0" scrolling = "no" id = "ifr"> </frame>
<u> </u> <u> </u> <u> </u>
<div onmousedown = "moveevent (event ، 't_div')">
<span> مرحبًا </span>
<a href = "javaScript:" onClick = "cl ('t')"> × </a>
</div>
<viv> مرحبًا بك في: wulin.com
</div>
<viv> </viv>
<u> </u> <u> </u> <u> </u>
</div>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.