JavaScript для мага


Вырезка из слоя - часть 2


 

  // определить, какой пиксел находитс\я в центре изображени\я

  middleX= Math.round(width/2);

  middleY= Math.round(height/2);

 

  // начальная позици\я

  pos= 0;

 

  // запуск!

  show();

}

 

function show() {

 

  // увеличить размер вырезаемой области

  pos+= 2; // величина  шага

  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;

 

  // проверить, не высвечено ли все изображение

    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 этого пиксела мы помещаем в переменные middleX и middleY. После этого мы вызываем функцию show(), которая задает размеры вырезаемой части изображения в зависимости от значений переменных middleX, 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.layers["imgLayer"] мы ставим  document? Дело в том, что каждый слой имеет свою собственную HTML-страницу - то есть, каждый слой получает имеет объект document. Чтобы получить доступ к изображению внутри слоя imgLayer, нам необходимо получить доступ к этому объекту document. В приведенном выше примере такое изображение носило название davinci. Все остальное поле листа должно быть чистым.

 




Начало  Назад  Вперед



Книжный магазин