Перспективные языки веб-разработки

Знакомство с технологией WebKit

Показывать лекцию целиком

Примеры

WebKit - свободный движок для отображения веб-страниц, разработанный на основе кода библиотек KHTML и KJS, используемых в графической среде KDE.WebKit содержит компоненты WebCore, предназначенный для рендеринга и движок JavaScript - JavaScriptCore. Имеются также библиотека WTF (WebTemplateFramework), предоставляющая вспомогательные функции общего назначения для всего WebKit и отладчик ошибок Drosera.

К приложениям, использующим WebKit, можно отнести: Yandex, GoogleChrome, AppleSafari и т.д.

Рассмотрим несколько примеров использования технологии WebKit.

Пример 1 (sample_1) Цветной куб

Откройте блокнот и наберите следующий код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<styletype="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: #0094ff;
-webkit-transform:matrix(1,0,0,1,200,200);
        }    

#div2 {
width: 100px;
height: 100px;
background-color: #4568de;
-webkit-transform:matrix(1,0,-1,1,50,-100);
        } 

#div3 {
width: 100px;
height: 100px;
background-color: #f00;
-webkit-transform:matrix(1,1,0,1,100,50);
        }          

</style>
</head>
<body>
<divid="div1"/>
<divid="div2"/>
<divid="div3"/>
</body>
</html>

Как видите, здесь технология web-kit используется для трансформаций в CSS3.

Пример 2 (sample_2) Эффект выцветания

Откройте блокнот и наберите следующий код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<styletype="text/css">
div {
opacity: 1;
-webkit-transition: opacity 1 slinear;
}

div:hover {
opacity: 0;
}
</style>
</head>
<body>
<div><imgsrc="m1.jpg"width="500"/></div>
</body>
</html>

В этом примере с помощью web-kit мы изменяем непрозрачность изображения.

Пример 3 (sample_3) Масштабирование изображения

Откройте блокнот и наберите следующий код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
	img { -webkit-transform: scale(0.3); }
	img:hover { -webkit-transform: scale(0.9); }
</style>
</head>
<body>
<imgsrc="zuratkul.jpg"/>
</body>
</html>

Пример 4 (sample_4) Эффект тени

Откройте блокнот и наберите следующий код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<imgsrc="msu.jpg"style="-webkit-transform: translate(50px,50px); -webkit-box-shadow:20px30px15px#888;"/>
</body>
</html>

Пример 5 (sample_5) Повороты

Откройте блокнот и наберите следующий код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<styletype="text/css">
#div1 {
position: absolute;
width: 200px;
height: 200px;
background-color: #0094ff;
-webkit-transform: rotate(0deg);
-webkit-transform-origin-x:300px;
-webkit-transform-origin-y:300px;
}

#div2 {
position: absolute;
width: 200px;
height: 200px;
background-color: #f00;
-webkit-transform: rotate(90deg);
-webkit-transform-origin-x:300px;
-webkit-transform-origin-y:300px;
}        

#div3 {
position: absolute;
width: 200px;
height: 200px;
background-color: #5060ea;
-webkit-transform: rotate(180deg);
-webkit-transform-origin-x:300px;
-webkit-transform-origin-y:300px;
}  

#div4 {
position: absolute;
width: 200px;
height: 200px;
background-color: Brown;
-webkit-transform: rotate(270deg);
-webkit-transform-origin-x:300px;
-webkit-transform-origin-y:300px;
}  


</style>
</head>
<body>
<divid="div1">0 градусов</div>
<divid="div2">90 градусов</div>
<divid="div3">180 градусов</div>
<divid="div4">270 градусов</div>
</body>
</html>

Пример 6 (sample_6) Трансформации (продолжение)

Откройте блокнот и наберите следующий код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<styletype="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: #0094ff;
-webkit-transform:matrix(1,0,0,1,0,0);
        }    

#div2 {
width: 100px;
height: 100px;
background-color: #ff6a00;
-webkit-transform:matrix(3,0,0,1,0,0);
        }           

#div3 {
width: 100px;
height: 100px;
background-color: #ffd800;
-webkit-transform:matrix(1,0,0,3,0,0);
        }        

#div4 {
width: 100px;
height: 100px;
background-color: #4568de;
-webkit-transform:matrix(1,0,-1,1,0,0);
        } 

#div5 {
width: 100px;
height: 100px;
background-color: #e87829;
-webkit-transform:matrix(1,2,0,1,0,0);
        } 


#div6 {
width: 100px;
height: 100px;
background-color: #6e35ec;
-webkit-transform:matrix(1,0,0,1,100,0);
        }          

#div7 {
width: 100px;
height: 100px;
background-color: #e33aaa;
-webkit-transform:matrix(1,0,0,1,0,100);
        }          

</style>
</head>
<body>
<divid="div1">Исходный элемент</div>
<divid="div2">Масштаб по горизонтали</div>
<divid="div3">Масштаб по вертикали</div>
<divid="div4">Наклон по горизонтали</div>
<divid="div5">Наклон по вертикали</div>
<divid="div6">Смещение по горизонтали</div>
<divid="div7">Смещение по вертикали</div>
</body>
</html>

Пример 7 (sample_7) Двухмерные и трехмерные трансформации

Откройте блокнот и наберите следующий код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<styletype="text/css">
#div1
{
position: relative;
height: 200px;
width:  200px;
margin: 50px;
padding:10px;
border: 1pxsolidblack;
}

#divRectangle
{
padding:50px;
position: absolute;
border: 1pxsolidblack;
background-color: #ffd800;
transform: rotate(45deg);
transform-origin:50%50%;
-webkit-transform: rotate(45deg); 
-webkit-transform-origin:20%40%; 
-webkit-transform: scale(1,1);
}
</style>
<scripttype="text/javascript">

functionGetTransformed() {
theTranslationX = document.getElementById('GetTranslatedX').value;
theTranslationY = document.getElementById('GetTranslatedY').value;
            document.getElementById('divRectangle').style.webkitTransformOrigin = theTranslationX + '% ' + theTranslationY + '%';
demoDiv = document.getElementById("divRectangle");
theScale = document.getElementById("GetScaled").value;
theRotation = document.getElementById("rotate").value + "deg";
theXSkew = document.getElementById("skewX").value + "deg";
theYSkew = document.getElementById("skewY").value + "deg";

theZScale = document.getElementById("scaleZ").value;

theXRotation = document.getElementById("rotateX").value + "deg";
theYRotation = document.getElementById("rotateY").value + "deg";
theZRotation = document.getElementById("rotateZ").value + "deg";

theZTranslation = document.getElementById("translateZ").value + "px";

theTransform = "scale(" + theScale + ")" + " rotate(" + theRotation + ")";
theTransform += " skew(" + theXSkew + ", " + theYSkew + ")";


theTransform += " rotateX(" + theXRotation + ")" + " rotateY(" + theYRotation + ")
" + " rotateZ(" + theZRotation + ")";
theTransform += " scaleZ(" + theZScale + ")" + " translateZ(" + theZTranslation + ") ";

demoDiv.style.webkitTransform = theTransform;
        }

</script>
</head>
<body>
<divid="div1">
<divid="divRectangle">HTML5</div>
</div>
<h3>Думерные преобразования</h3>
<tableborder="0">
<tr>
<td>Вращение:</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="rotate"/></td>
</tr>

<tr>
<td>Перемещение по горизонтали:</td>
<td><inputtype="range"min="-200"max="200"
value="0"onchange="GetTransformed()"id="GetTranslatedX"/></td>
</tr>

<tr>
<td>Перемещение по вертикали:</td>
<td><inputtype="range"min="-200"max="200"
value="0"onchange="GetTransformed()"id="GetTranslatedY"/></td>
</tr>

<tr>
<td>Масштаб:</td>
<td><inputtype="range"min="0.1"max="5"
value="0.9"onchange="GetTransformed()"id="GetScaled"/></td>
</tr>

<tr>
<td>Растяжение по горизонтали:</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="skewX"/></td>
</tr>

<tr>
<td>Растяжение по вертикали:</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="skewY"/></td>
</tr>
</table>

<h3>Трехмерные преобразования</h3>
<tableborder="0">
<tr>
<td>Масштабирование по оси Z</td>
<td><inputtype="range"min="0.1"max="10"
value="0.9"onchange="GetTransformed()"id="scaleZ"/></td>
</tr>

<tr>
<td>Поворот вокруг оси X</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="rotateX"/></td>
</tr>

<tr>
<td>Поворот вокруг оси Y</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="rotateY"/></td>
</tr>

<tr>
<td>Поворот вокруг оси Z</td>
<td><inputtype="range"min="-360"max="360"
value="0"onchange="GetTransformed()"id="rotateZ"/></td>
</tr>

<tr>
<td>Перенос относительно оси Z</td>
<td><inputtype="range"min="-400"max="400"
value="0"onchange="GetTransformed()"id="translateZ"/></td>
</tr>

</table>

<br/><br/>
<divid="demo"></div>
		
</body>
</html>

Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^