Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : -ms-zoom
смотрим также
Материал из Справочник Web-языков
Содержание |
Атрибут -ms-zoom | Свойство zoom
Задает коэффициент масштабирования объекта.
Синтаксис
| HTML | { -ms-zoom : vMagnification } |
| Скрипты | [ vMagnification = ] object.style.zoom |
Используемые значения
- vMagnification
- Строковое или Числовое значение, которое может определять и принимать одно из следующих значений:
- normal
- Значение по умолчанию. Объект отображается с реальными размерами.
- number
- Задается вещественным числом, определяющим коэффициент масштабирования. Значение 1.0 соответствует нормальному отображению.
- percentage
- Задается целым числом в процентах (%). Значение 100% соответствует нормальному отображению.
Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является normal. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
Задание свойства zoom для отображения объекта со значением, отличным от нормального, влияет на расположение соседних элементов на web-странице. Используйте его аккуратно.
Хотя свойство zoom не наследуется, тем не менее его значение применяется и для дочерних элементов.
Как правило, свойство zoom используется для привлечения внимания пользователя к отдельному объекту или элементу в динамически формируемом документе. Также элемент наоборот можно сделать максимально незаметным.
Примеры
В следующих примерах используются атрибут zoom и свойство zoom для задания коэффициента масштабирования для элемента p.
В первом примере задан уменьшающий коэффициент, равный 0.1
<STYLE>
.clsTeenyWeeny { zoom: 0.10 }
</STYLE>
Во втором примере масштаб элемента увеличивается в 2 раза от нормального при наведении на него курсора мыши (событие onmouseover).
<P onmouseover="this.style.zoom='200%'" onmouseout="this.style.zoom='normal'">
В третьем примере пользователю предоставлена возможность собственноручно изменять масштаб элементов.
<html xmlns:control="">
<head>
<title>Zoom Demo</title>
<script type="text/javascript">
function zoomIn() {
newZoom= parseInt(oZoom.style.zoom)+10+'%'
oZoom.style.zoom =newZoom;
oCode.innerText='zoom: '+newZoom+'';
}
function zoomOut() {
newZoom= parseInt(oZoom.style.zoom)-10+'%'
oZoom.style.zoom =newZoom;
oCode.innerText='zoom: '+newZoom+'';
}
function changeZoom() {
newZoom= parseInt(oSlider.value)
oZoom.style.zoom=newZoom+'%';
oCode.innerText='zoom: '+newZoom+'%';
}
function changeZoom2(oSel) {
newZoom= oSel.options[oSel.selectedIndex].innerText
oZoom.style.zoom=newZoom;
oCode.innerText='zoom: '+newZoom+'';
}
</script>
</head>
<body onload="oZoom.style.zoom='100%';
oCode.innerText='zoom: 100%'; ">
<!-- Блок элементов управления-->
<div style="position: absolute; top: 15px; left: 20px;">
<form>
<control:slider id="oSlider" style="sl--orientation:vertical;
height:204px; width:28px; background-color:#336699;
padding-left:5px; border-left:1px solid #6699CC" tickinterval="10"
max="200" min="0" onchange="changeZoom()"> </control:slider>
</form>
</div>
<div style="position: absolute; top: 15px; left: 48px; width: 28px; height: 200px; background-color: #336699;" align="center">
<img src="/workshop/graphics/zoomscale.gif" alt="scale" border="0" usemap="#scaler">
</div>
<!-- Блок для масштабируемых объектов-->
<div style="position: absolute; top: 15px; left: 76px; width: 550px; height: 204px; background-color: black; vertical-align: middle; padding: 25px; font-family: arial; font-weight: bold; color: white; z-index: 3" align="center">
<!-- Масштабируемая область -->
<div id="oZoom" style="zoom: 100%" align="center">
<h1>Добро пожаловать в Сиэттл!</h1>
<img src="/workshop/graphics/seattlesmall.jpg" alt="Seattle skyline" align="left">
<p align="center">Замечательный город в штате Вашингтон.</p>
</div>
</div>
<!-- Показываемый код -->
<div style="overflow: hidden; border: 1px solid black; position: absolute; top: 219px; left: 20px; width: 606px; height: 90px; padding: 1px; padding-left: 25px; background-color: white; z-index: 3;">
<span><div style="</span>
<span style="font-weight: bold; font-family: verdana; color: red; font-size: 9pt" class="coder" id="oCode">
</span><span>"></span>
<div>
<h1> Добро пожаловать в Сиэттл!</h1></div>
<div>
<img src="seattlesmall.jpg"></div>
<div>
<p>Замечательный город в штате Вашингтон.</p></div>
<div class="coder">
</div></div>
</div>
<div id="oControls" style="position: absolute; top: 308px; left: 20px; width: 606px; height: 100px; background-color: gray; color: white; font-family: verdana; font-size: 11pt; font-weight: normal; padding: 10px; z-index: 3; text-align: center; border: 1px solid black; text-align: left;">
<div style="padding-left: 65px">
Код используется для изменения рисунка, расположенного выше. <br>
<hr>
<div align="center">
<select id="percent" onchange="changeZoom2(percent); ">
<option selected="">Use Percentage Value</option>
<option>10%</option>
<option>25%</option>
<option>50%</option>
<option>75%</option>
<option>100%</option>
<option>150%</option>
<option>200%</option>
</select> <select id="normal" onchange="changeZoom2(normal); ">
<option selected="">Use Number Value</option>
<option>.1</option>
<option>0.25</option>
<option>0.5</option>
<option>0.75</option>
<option>1.0</option>
<option>1.5</option>
<option>2.0</option>
</select><hr></div>
</div>
<map name="scaler">
<area shape="rect" coords="0,182,19,199" alt="plus" href="#" onclick="zoomIn()" style="cursor: hand">
<area shape="rect" coords="1,1,18,15" alt="minus" href="#" onclick="zoomOut()">
</map>
</body>
</html>
Стандарты
Это свойство является расширением от Microsoft для CSS
Поддерживаемые браузеры
Internet Explorer 5.5, 6.0, 7.0, 8.0
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms531189(VS.85).aspx
