Справочник по 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

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms531189(VS.85).aspx

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования