Клиппинговые слои (Выпуск 8)

По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/clipping.html

Отсечение или клиппинг - обозначает задание видимых частей слоя. Какова разница между клиппингом и шириной/высотой? Ширина и высота задают размер HTML элемента. А клиппинг - это окошко,через которое мы смотрим на HTML элемент.

Регион клиппинга задаётся четвёркой параметров в пикселах: (top, right, bottom, left), порядок важен.

И синтаксис клиппинга такой:

clip:rect(top,right,bottom,left)

Пример использования:

<DIV ID="blockDiv"
STYLE="position:absolute; left:50; top:20; width:100; height:50;
clip:rect(-10,110,60,-10); background-color:#FF0000;
layer-background-color:#FF0000;"></DIV>

В результате мы получим вот что:

То есть к границам прямоугольника шириной 100 пикселей и высотой 50 пикселей добавилась экстра-область шириной 10 пикселей: -10 вверх, 10 вправо (110), 10 вниз (60), -10 влево.

Обратите внимание на присутствие background-color:#FF0000; и layer-background-color:#FF0000;". Это сделано для совместимости кода в IE и NN

JavaScript и клиппинг

1. Клиппинг в NN

В NN вы можете получать или изменять значения параметров клиппинга индивидуально:

document.divName.clip.top
document.divName.clip.right
document.divName.clip.bottom
document.divName.clip.left

Пример алерта на значение верхней границы клиппинга:

alert(document.divName.clip.top)

Изменение значения верхней границы клиппинга на 50 пикселей:

document.divName.clip.top = 50

2. Клиппинг в IE

Доступ ко всему клиппингу может быть сделан так:

alert(divName.style.clip)

Пример такого алерта:

"rect(0px 50px 100px 0px)"

Изменение клиппинга тоже может быть сделано комплексно:

divName.style.clip = "rect(0px 100px 50px 0px)"

3. Общая фунцкия получения значений клиппинга

function clipValues(obj,which) {
 if (ns4) {
  if (which=="t") return obj.clip.top
  if (which=="r") return obj.clip.right
  if (which=="b") return obj.clip.bottom
  if (which=="l") return obj.clip.left
 }
 else if (ie4) {
  var clipv = obj.clip.split("rect(")[1].split(")")[0].split("px")
  if (which=="t") return Number(clipv[0])
  if (which=="r") return Number(clipv[1])
  if (which=="b") return Number(clipv[2])
  if (which=="l") return Number(clipv[3])
 }
}

Пример её вызова:

alert(clipValues(block,"t"))

Здесь "t" означает top. Аналогичным образом можно использовать "b", "r", "l" для получения значений параметров bottom, right, left соответсвенно.

Пример использования общей функции

4. Общая функция изменения клипинга

4.1 clipTo()

Эта функция позволяет присвоить польностью другие значения параметрам клиппинга:

function clipTo(obj,t,r,b,l) {
 if (ns4) {
  obj.clip.top = t
  obj.clip.right = r
  obj.clip.bottom = b
  obj.clip.left = l
 }
 else if (ie4) obj.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}

Пример вызова:

clipTo(block,0,100,100,0)

4.2 clipBy()

Позволяет сдвигать область клиппинга на заданное значение

function clipBy(obj,t,r,b,l) {
 if (ns4) {
  obj.clip.top = clipValues(obj,'t') + t
  obj.clip.right = clipValues(obj,'r') + r
  obj.clip.bottom = clipValues(obj,'b') + b
  obj.clip.left = clipValues(obj,'l') + l
 }
 else if (ie4)
            obj.clip = "rect("+(this.clipValues(obj,'t')+t)+"px "+
            (this.clipValues(obj,'r')+r)+"px "+
            Number(this.clipValues(obj,'b')+b)+"px "+
            Number(this.clipValues(obj,'l')+l)+"px)"
}

Вызывается аналогичным образом, как и предыдущая функция:

clipBy(block,0,10,5,0)

Пример использования clipTo() и clipBy()

Анимированный клиппинг (вайпинг)

Если мы поместим clipBy() в цикл, то можем создать эффект анимированного расширения или удлинения области коиппинга. Но мы поступим хитрее:

function wipe1() {
 if (clipValues(block,'r')<200) {
  clipBy(block,0,5,0,0)
  setTimeout("wipe1()",30)
 }
}

Здесь цикл if будет работать до тех пор пока правая граница клиппинга не примет значение в 200 пикселей.

Пример вайпинга