В этой статье описывается метод JS+CSS для реализации красивого закругленного углового эффекта COMP-UP SPECIAL SPECIAL SPECIAL. Поделитесь этим для вашей ссылки. Детали следующие:
Кода -копия выглядит следующим образом:
<! 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>
<style>
тело{
поля: 0px;
Заполнение: 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);
}
U {
Дисплей: блок;
Переполнение: скрыто;
Высота: 1px
}
U.f1 {
фоновый цвет:#5CC;
Фон: #5CC;
Маржа: 0px 3px
}
U.f2 {
фоновый цвет:#5CC;
Граница правая: #5CC 2PX твердое вещество;
Полевая: 0px 1px;
Слево
}
U.f3 {
фоновый цвет:#5CC;
Граница правая: #5CC 1PX SOLID;
Полевая: 0px 1px;
Слево
}
.d_top {
ясно: оба;
переполнение: скрыто;
фоновый цвет:#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 {
ясно: оба;
переполнение: скрыто;
фоновый цвет:#5CC;
Высота: 2px;
}
</style>
<script type = "text/javascript">
Функция $ (id) {return document.getElementByid (id);}
функция Show (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 (перетаскивать) {
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;
}
</script>
</head>
<тело>
<div id = "a" style = "позиция: абсолют; слева: 300px; top: 200px;">
<a href = "javascript:" onclick = "show ('t')"> Нажмите здесь, чтобы вспять Div с округлым угловым эффектом </a> <a href = '// www.vevb.com/' target = '_ blank'> <u> Диалоговое окно </u> </a>! </div>
<div id = "t" style = "display: none;">
<div id = "Back_div">
<iframe style = "Положение: абсолют; слева: 0px; top: 0px; слева: 0px; внизу: 0px; float: left; z-index: -1; margin: 0px; накладка: 0px;" frameborder = "0" scrolling = "no" id = "ifr"> </iframe>
</div>
<Div style = "Ширина: 500px; положение: абсолютное; плавание: слева; Верх: 25%; слева: 30%; z-index: 999; ясно: оба; переполнение: скрыто;" id = "t_div">
<iframe style = "Положение: абсолют; слева: 0px; top: 0px; слева: 0px; внизу: 0px; float: left; z-index: -1; margin: 0px; накладка: 0px;" frameborder = "0" scrolling = "no" id = "ifr"> </iframe>
<u> </u> <u> </u> <u> </u>
<div onmousedown = "moveevent (event, 't_div')">
<pan> добро пожаловать </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.