Wiki-учебник по веб-технологиям: JavaScript/Отсечение ...

Главная | Каталог |

Отсечение


Вы можете определить, какая из прямоугольных частей слоя будет видима. Все остальное, снаружи этой области, не будет показываться. Это называется, отсечением. Вы можете использовать HTML-свойство clip следующим образом:

<ilayer left=0 top=0 clip="20,50,110,120">
<img src="davinci.jpg" width=209 height=264>
</ilayer>




Эта часть размером 90x70 (в пикселях). Первые два значения, определенные через свойство clip (в HTML-теге <layer> или <ilayer>) определяют верхний левый угол блока отсечения. Следующие два значения определяют нижний правый угол. Следующее изображение иллюстрирует это:



Более интересные вещи могут быть достигнуты через установку области отсечения через JavaScript. Для этого Вы можете изменить свойства clip.left, clip.top, clip.right and clip.bottom Layer-объекта. Всего лишь присвойте новое значение пикселя одному из этих свойств, и область отсечения изменится. Следующий пример изменяет область отсечения динамически. У пользователя создается впечатление, что изображение медленно создается:



Вот этот код:

<html>
<head>

<script language="JavaScript">
<!-- hide

var middleX, middleY, pos;


function start() {
  // get size of image
  var width= document.layers["imgLayer"].document.davinci.width;
  var height= document.layers["imgLayer"].document.davinci.height;

  // calculate pixel in the middle of image
  middleX= Math.round(width/2);
  middleY= Math.round(height/2);

  // starting position
  pos= 0;

  // start it!
  show();
}

function show() {

  // increase size of clipping area  
  pos+= 2; // step size
  document.layers["imgLayer"].clip.left= middleX- pos;
  document.layers["imgLayer"].clip.top= middleY- pos;
  document.layers["imgLayer"].clip.right= middleX+ pos;
  document.layers["imgLayer"].clip.bottom= middleY+ pos;

  // check if the whole image has been displayed
  if (!((pos > middleX) && (pos > middleY))) 
    setTimeout("show()", 20);  

}

// -->
</script>
</head>

<body>

<ilayer name="imgLayer" clip="0,0,0,0">
<img name=davinci src="davinci.jpg" width=209 height=264>
</ilayer>

<form>
<input type=button value="Start" onClick="start()">
</form>

</body>
</html>


Кнопка в <body>-части вызывает функцию start. Сначала мы должны вычислить позицию запуска – это пиксель в середине изображения. Мы сохраняем значения x и y этого пикселя в переменных middle и middleY. Затем вызывается функция show() Эта функция устанавливает область отсечения в зависимости от переменных middle, middleY и pos. Переменная pos увеличивается каждый раз, когда вызывается функция show(). Это означает, что область отсечения становится каждый раз больше. После выполнения show() мы устанавливаем время ожидания(таймаут) с помощью setTimeout – так функции show() вызывается снова и снова. Этот процесс остановится, как только изображение появится целиком.

Пожалуйста обратите внимание, как мы получаем размер изображение в функции start():

var width= document.layers["imgLayer"].document.davinci.width;
var height= document.layers["imgLayer"].document.davinci.height;


Через document.layers["imgLayer"] мы можем обратиться к слою, названному imgLayer. Но почему мы используем document после document.layers["imgLayer"]. Каждый слой содержит собственную HTML-страницу – это означает, что каждый слой имеет document -объект. Чтобы обращаться к изображению внутри слоя imgLayer мы должны обратиться к этому document-объекту. Вы можете видеть в коде, что изображение названо davinci.