1. Подпрограмма
При разработке веб -сайта нам нужно разработать несколько модальных подразделений, например, как
Этот шаг легко реализовать, просто div+css в порядке, см. Код:
Кода -копия выглядит следующим образом:
<div> </div>
<div>
<div>
<Center> Нажмите на область блока, может изменить мою позицию </center>
</div>
</div>
Кода -копия выглядит следующим образом:
. Модал-защитник
{
фоновый цвет: #9999999;
Внизу: 0;
слева: 0;
непрозрачность: 0,3;
позиция: исправлена;
Справа: 0;
Верх: 0;
Z-Index: 1100;
}
. Модал-Window
{
фоновый цвет: #fffff;
Граница: 1PX SOLIT #6B94AD;
Box-Shadow: 5px 5px 5px #6B94AD;
Фондовая семья: «Microsoft Yahei»;
размер шрифта: 12px;
Высота: 120px;
Слева: 50%;
Мяглевая маржа: -160PX;
маржинальная версия: -160px;
непрозрачность: 1;
позиция: исправлена;
Верх: 50%;
Ширина: 320px;
Z-Index: 1110;
}
.Modal-Window .Head
{
Высота: 25px;
Цвет: #ffff;
шрифт-вес: 600;
Справочный Image: -moz-Linear-Gradient (Top, #4A8CC5, #2963A5);
Фоно-изображение: -Вобкит-градиент (линейный, левый верх, левый нижний, цветовой стоп (0, #4A8CC5), цветовой стоп (1, #2963A5));
Фильтр: Progid: dximagetransform.microsoft.gradient (startColorstr = '#4A8CC5', EndColorstr = '#2963a5', gradientType = '0'); :::::::::::::::::
}
.Modal-Window. Гард-центр
{
надоеволок: 2PX;
}
Добавление вышеуказанного HTML и CSS может легко достичь эффекта вышеуказанной модальной формы. где осталось: 50%; верх: 50%;
Конечно, размер модальной формы записан в классе стиля. Модальный Window.
Кода -копия выглядит следующим образом:
<div> </div>
<div>
<div>
<Center> Нажмите на область блока, может изменить мою позицию </center>
</div>
</div>
Вторая строка кода добавляется в класс стиля .list-Window, чтобы переопределить размер и положение в классе. Модал-окно, но также гарантирует, что модальная форма центрирована и отображается.
Кода -копия выглядит следующим образом:
.list-Window
{
Ширина: 600px;
Высота: 400px;
Мяглевая маржа: -300PX;
маржинальная версия: -200px;
}
Как показано
Видно, что реализация этого шага очень проста.
2. Когда мышь нажимает на голову подчинки, как перетаскивать и переместить подпрограмму? После введения JQ нам нужно только несколько сценариев, чтобы решить эту небольшую функцию. Если вы не верите в это, давайте посмотрим
Кода -копия выглядит следующим образом:
var встал, вверху, $ это;
$ (документ) .delegate ('. Modal-Window .head', 'mousedown', function (e) {
левый = e.clientx, top = e.clienty, $ this = $ (this) .css ('cursor', 'move');
это. SetCapture?
this.setCapture (),
this.onmousemove = function (ev) {mouseMove (ev || event);
this.onmouseup = mouseup
): $ (документ) .bind ("MouseMove", MouseMove) .Bind ("MouseUp", MouseUp);
});
Функция MouseMove (e) {
var target = $ this.parents ('. Modal-Window');
var l = math.max ((e.clientx -левый + number (target.css ('margin -left'). заменить (/px $/, '')) || 0), -target.position (). левый);
var t = math.max ((e.clienty -top + number (target.css ('margin -top'). заменить (/px $/, '')) || 0), -target.position (). вершина);
l = math.min (l, $ (window) .width () - target.width () - target.position (). слева);
t = math.min (t, $ (window) .height () - target.height () - target.position (). top);
слева = e.clientx;
top = e.clienty;
target.css ({'margin-left': l, 'margin-top': t});
}
функция MouseUp (e) {
var el = $ this.css ('cursor', 'default'). get (0);
El.ReleaseCapture?
(
El.ReleaseCapture (),
el.onmousemove = el.onmouseup = null
): $ (документ) .unbind ("MouseMove", MouseMove). Unbind ("MouseUp", MouseUp);
}
Этот код очень короткий, и он может работать плавно в различных браузерах.
Фактически, принцип его реализации очень прост и приблизительно разделен на три шага:
① Когда мышь находится под Моуседауном во главе модальной формы, немедленно связывайте события MouseMove и MouseUp с документом.
② Когда мышь не появляется (без мыши), если мышь перемещается в форме, активируйте функцию MouseMove и перемещайте положение всей формы во времени, расчета расстояния, на которое движется мышь.
③ Когда мышь подпрыгнута (MouseUp), вызовите событие MouseUp, чтобы раскрыть событие MouseMove и событие MouseUp, связанное с документом.
Принцип всего процесса: когда мышь Mousedown снижается, событие движения мыши передается в документ, а вся форма обрабатывается через событие движения мыши в документе.
Кроме того, в MouseMove есть небольшая трюка, которая является глобальной левой. Как далеко мышь перенесена.
После анализа этого кода было обнаружено, что мышь перемещает форму или любой элемент в документе довольно прост.
Например, если вы хотите изменить размер формы путем перетаскивания и падения, нам просто нужно настроить размер формы в функции обработки событий MouseMove, и все будет в порядке. Снова улучшились?
Некоторые люди могут спросить, что делают SetCapture и Relesecapture соответственно? На самом деле, это для совместимости IE. SetCapture позволяет текущему элементу захватить все события мыши.