технология интернета, html, css, javascript, прозрачность, Виктор Кон

Прозрачность

Очень мощным средством оживления обьектов сайта является манипулирование с прозрачностью. Я уже немного писал об этом в конце главы про Основы DHTML. Я не буду повторять то, что там написано, и советую еще раз внимательно прочитать эту главу. Здесь же я покажу как это можно использовать для оживления сайта. С учетом того, что прозрачность задается по разному в стандартных браузерах и в Экплорере, этот параметр вообще удобно задавать только в коде Javascript. Более того, его могут иметь все объекты, не только div. Если манипулировать с картинками, то можно менять прозрачность картинок, но в более сложном случае лучше все объекты помещать в контейнеры div и менять прозрачность этих контейнеров. Однако, в данной статье я рассмотрю очень простой случай плавного перехода от одной картинки к другой и поэтому буду менять прозрачность самих картинок. Здесь я опять покажу очень простой пример, но его можно постепенно модифицировать, усложнять и комбинировать с другими примерами.

Идея примера следующая. Размещаем две картинки в одном и том же месте, одну над другой. Но сразу делаем так, что нижняя картинка показывается, а верхняя прозрачная, как стекло. После клика на кнопке постепенно меняем параметр прозрачности от 0 до 1, и вот уже верхняя картинка видна, а нижняя под ней, естественно, не видна, хотя она вовсе не прозрачная. А в процессе перехода видны обе в смешанном состоянии. Как обычно, я даю полный код сайта и потом его объясню. Этот текст можно скопировать в файл с расширением htm и запустить на исполнение, он будет работать. Для лучшего понимания моих комментариев советую это проделать. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S.

<html><head><title>Прозрачность</title> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> <style type="text/css"> #ba{position:relative; display:block; left:0px; top:0px; width:640px; height:100px; overflow:hidden; border:ridge 2px gold;} #bot{position:absolute; left:0px; top:-250px;} #top{position:absolute; left:0px; top:-200px;} </style></head><body bgcolor="#ffffff" text="#000000"> <center><h2>Прозрачность</h2> <button onclick="one()">Change</button> <button onclick="two()">Restore</button><br> <div id="ba"><img id="bot"; src="http://vkacl.narod.ru/photos/a01w.jpg" /> <img id="top"; src="http://vkacl.narod.ru/photos/a02w.jpg" /></div> <script type="text/javascript"> var n,nm,op1,op2,pause,ona,IE; IE=!-[1,]; ops=0.05; n=0; nm=20; ona=false; function param(){op1=1; op2=0; if( IE ){st[0].filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+(op1*100)+')'; st[1].filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+(op2*100)+')';} else{st[0].opacity=op1; st[1].opacity=op2;} } function move(){n++; if( n == nm ){pause=1.e9;} if( ona ){if(op2 < 1){op2 += ops;}}else{if(op2 > 0){op2 -= ops;}} if( IE ){st[1].filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+(op2*100)+')';} else{st[1].opacity=op2;} setTimeout(move, pause); } function one(){n=0; pause=100; ona=true; move();} function two(){n=0; pause=100; ona=false; move();} function geid(id){return document.getElementById(id)} st = new Array(); st[0]=geid('bot').style; st[1] = geid('top').style; param(); </script></center></body></html>

Этот код может быть чуть сложнее, чем остальные. Здесь в теге javascript уже 5 функций. Первая функция param() имеет стандартное название, а именно, задать стартовые значения параметров. Как я уже говорил, параметр прозрачности проще всего сразу задавать javascipt кодом, вот это и делается раздельно для браузера Интернет Экплорер и для остальных. Вторая функция опять стандартная, она обеспечивает движение или процесс, следующие две функции вызываются по кнопкам. Последняя стандартная. На сайте у нас стандартное окно, а в нем две картинки. Файлы картинок находятся в интернете, поэтому для нормальной работы программы компьютер должен быть подключен в мировую сеть. Я просто взял две фотографии размером 640*480, но вертикальный размер окна всего 100, поэтому вертикальная позиция картинок задана так, чтобы в окно попала самая интересная часть. Ну а все, что за пределами окна не видно. Теги картинок имеют разные значения параметра id и по этим значениям формируется массив переменных-ссылок на параметры style этих картинок. В нашем примере картинок всего две и массив можно было бы не делать, я просто хотел показать как работают с массивом. Когда картинок много, то из них тоже делается массив и адресация картинок происходит несколько иначе. Ну и в конце запускается функция param().

Теперь посмотрим как это работает. Функция param() просто задает стартовые значения параметра прозрачности таким образом, что нижняя картинка видна, верхняя -- нет. И программа спит. Однако по клику на кнопке [Change] запускается функция one(). Она обнуляет счетчик, задает значение паузы, задает направление процесса и запускает функцию move(). Эта функция nm раз увеличивает значение параметра прозрачности второй картинки таким образом, что оно поднимается от 0 до 1. После этого значение паузы делается очень большим и функция перестает работать. Программа опять спит. Но если кликнуть вторую кнопку Restore, то все повторится, только процесс пойдет в обратном направлении. Вот и все. Ясно, что такая программа имеет только учебное (демонстрационное) значение. Но она показывает как делать плавный переход от одной картинки к другой с медленным изменением прозрачности. А это уже можно использовать в анимациях. Более того, такой переход является одним из многих в моей программе Слайд-шоу. Об этом речь будет идти в других статьях.

Автор: Виктор Кон, 9.09.2013