Продолжайте с приведенным выше JavaScript Простую реализацию всплывающего окна перетаскивания (i) для обучения.
Ниже приведен конкретный анализ кода:
Во -первых, давайте подтвердим структуру:
Плавающее окно: изначально невидимо. Включает в себя строку заголовка и панель контента, с панелью заголовка и кнопками закрытия в панели заголовка.
Маска слой: невидимый в начале. Используется для установки полупрозрачного фона, когда появляется плавающее окно.
Кнопка: используется для нажатия, чтобы вспять плавающее окно.
Следующее будет подробно объяснить
1. Чтобы окно свободно перемещаться, положение окна должно быть абсолютным;
/*Логин компонент плавающего слоя*/. Popup {Display: None; /*Начальное укрытие*/ ширина: 380px; Высота: Авто; /*Высокая свобода, потому что это неясно, сколько контента. */ граница: 1px solid #d5d5d5; Фон: #ffff; /*Содержание окна непрозрачное, фон белый*/ Box-Shadow: 0 0 3px Rgba (0, 0, 0, 0,25); -Моз-бокс-тень: 0 0 3px rgba (0, 0, 0, 0,25); -Webkit-box-shadow: 0 0 3px rgba (0, 0, 0, 0,25); /*Окно содержания затененное*/ border-radius: 8px; /* Все углы используют округлые углы с радиусом 8px, это свойство представляет собой стандартное свойство CSS3*/ -moz-border-radius: 8px; /* Частные атрибуты браузера Mozilla*/ -Webkit-border-radius: 8px; /* Приватные атрибуты браузера Webkit*//* окно округлые углы*/ позиция: абсолют; Верх: 100px; Слева: 100px; /*Абсолютное позиционирование*/ z-index: 9000; }2. Добавьте панель заголовка в окно и установите курсор мыши на строку заголовка в форму перетаскивания (перемещение) (при перетаскивании в хроме курсор станет текстовым курсором, и она будет восстановлена после выпуска кнопки мыши). Здесь вам нужно установить округлый угол для верхнего левого и верхнего правого углы заглавной панели.
/*Область панели заголовка*/. POPUP_TITLE {Height: 48px; высота линии: 48px; /*Центр вертикально*/ накладка: 0px 20px; /*Сделайте определенное расстояние от левого*/ фон: #f5f5f5; /*Цвет фона*/ Border-Bottom: 1px solid #efefefef; /*Нижняя граница*/ граница-радий: 8px 8px 0 0; /* Используйте округлые углы с радиусом 5px в верхнем левом и верхнем правом угле. Это свойство является стандартным свойством CSS3*/ -MOZ-Border-Radius: 8px 8px 0 0; /* Частная собственность браузера Mozilla*/ -Webkit-border-radius: 8px 8px 0 0; /* Приватные свойства браузера Webkit*//* окно округлые углы*/ color: #535353; размер шрифта: 16px; /* Цвет шрифта и размер шрифта*/ cursor: Move; /* Подвижный стиль*/ -moz-user-select: none; / * Firefox All */ -Webkit-USER-SELECT: Нет; /* Chrome All / Safari All / Opera15+* / -MS-USER-SELECT: Нет; /* Ie10*/ -khtml-user-select: none; /* Ранние браузеры*/ select: none; -О-пользователь-себль: нет; /* Приведенные выше два атрибута в настоящее время не поддерживаются, поэтому я написал их здесь, чтобы снизить риски*/}Вот несколько знаний, чтобы понять:
1. CSS3 (граница-радий) границы округлые углы
граница-радис является методом аббревиатуры. Кроме того, четыре значения устанавливаются в порядке верхнего левого, верхнего правого, правого нижнего, нижнего левого и левого дна. Основные ситуации будут происходить в следующих ситуациях:
1. Если есть только одно значение, то четыре значения верхних левых, верхних правых, правых нижних и нижних левых равны.
2. Существует два значения, затем верхний левый равен правой нижней части, и первое значение принимается; Верхнее правое равно лево дна, а второе значение принимается
3. Существует три значения, первое значение-установить верхнюю левую; В то время как второе значение верно правое и левое нижнее, и они будут равны, а третье значение-установить правую.
4. Существует четыре значения, первое значение состоит в том, чтобы установить верхнюю левую, а второе значение-правое верхнее, третье значение в правом нижнем углу, а четвертое значение-установить левое дно.
Поддерживаемые браузеры:
2. Курсор: двигаться
Свойство курсора указывает тип указателя (курсор).
Когда значение свойства перемещается, это означает, что объект, упомянутый этим курсором, является подвижным, как правило, крест -стрелка, как показано на рисунке.
3. User-Select: используется для управления селективностью контента
Значение с автоматическим делом, пользователь может выбрать контент в элементе
Нет - пользователь не может выбрать какой -либо контент в элементе
Текст-пользователь может выбрать текст в элементе
Элемент - текст необязательно, но только в границах элемента (только поддерживается IE и FF)
Следует отметить, что выбор пользователя не является стандартным атрибутом W3C CSS, и браузер поддерживает его не полностью и необходимо регулировать для каждого браузера.
Описание пользователя:
Устанавливает или получает, разрешено ли пользователю выбирать текст.
(1) IE6-9 не поддерживает это свойство, но поддерживает использование атрибута тега на SelectStart = «return false;» Чтобы достичь эффекта выбора пользователя: нет; Safari и Chrome также поддерживают этот атрибут тега;
(2) Это свойство не поддерживается до Opera12.5, но, как и IE6-9, оно также поддерживает использование атрибута частного тега, не выбрасываемого = "на" для достижения эффекта выбора пользователя: нет;
(3) другое значение не выбираемого; В других браузерах, если текст установлен на -ms-user-select: none; В других браузерах пользователь не сможет начать выбирать текст в текстовом блоке.
Однако, если пользователь начинает выбирать текст в других областях страницы, пользователь все равно может продолжать выбирать текст области, который устанавливает текст на -с-пользователь-селекцию: none;.
Проанализируйте следующий код (примечание: этот код и результаты анализа этого кода взяты из W3Help):
<! Doctype html> <html> <body> <div unselectable = "on" style = "founal: #cc;" > Необъяснимо = on </div> <br/> <div style = "founal: #cc; -webkit-user-select: none;" > -webkit-user-select: none; </div> <br/> <div style = "founal: #cc; -moz-user-select: none;" > -moz-user-select: none; </div> <br/> <div style = "foureny: #cc;" OnSelectStart = "вернуть false;" > onselectstart = "return false;" </div> </body> </html>
Эффекты в каждом браузере следующие:
Примечание 1: Содержание может быть отключено.
ПРИМЕЧАНИЕ 2: Никакой контент не запрещено выбрать.
Видно, что метод запрета выбора контента заключается в следующем:
Т.е. установите unselectable = "on" для тега и установите метод тега на selectstart = "вернуть false;"
Firefox устанавливает частные стили для тегов -moz-user-select: нет.
Chrome Safari устанавливает личный стиль для тега -webkit-user-select: none и устанавливает метод тега на SelectStart = "return false;".
Opera set unselectable = "on"
Решение
Установите стили для ярлыков -moz-user-select: none; -webkit-user-select: нет в одно и то же время, установите Unselectable = "on", чтобы убедиться, что все браузеры могут запретить выбор контента.
Если вы установите запрещенный стиль выбора в панель заголовка всплывающего окна «Плавающая разница» в случае, вы можете установить его так:
<div id = "opup_title" unselectable = "on"> log in <a href = "javascript: hidepopup ();"> </a> </div>
.popup_title {-moz-user-select: none; / * Firefox All */ -Webkit-USER-SELECT: Нет; /* Chrome All / Safari All / Opera15+* / -MS-USER-SELECT: Нет; /*Ie10*/ -khtml-user-select: none; /* Ранние браузеры*/ select: none; -О-пользователь-себль: нет; /*Приведенные выше два атрибута в настоящее время не поддерживаются, написанные здесь, чтобы снизить риски*/}Примечание: эта статья оригинальная, адрес: http://www.cnblogs.com/wanghuih/p/5576910.html
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.