進階技術(二)

dynamic html (Dhtml)

在Dhtml中, 將所有的html元素都使用一個一個的JS物件來進行表示, 使用物件來表示元素本身, 使用物件之間的包含關係來表示元素之間的層級關係.

使用一個文件結構樹 DOM 來表示整個html文件.

物件上可以設計屬性和方法, 通過操作物件上的屬性或方法, 可以間接的操作頁面中的元素.

利用這種方式將html、CSS、JavaScript整合在了一起，形成了現在的Dhtml技術.

Dhtml可以分為兩部分內容: BOM和DOM

BOM: Browser Object Model 瀏覽器物件模型
DOM: Document Object Model 文件物件模型

改變 HTML 樣式

        document.getElementById(id).style.property=新樣式

例如:

<h1 id="id1">我的標題</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red' ">
點我!</button>

看效果

2D 轉換(transform)

轉換，移動，比例化，反過來，旋轉，和拉伸元件。
transform 有下列方法:

translate() 水平和垂直移動
rotate() 旋轉
scale() 改變大小
skew() 傾斜
matrix() 矩陣

translate() 方法

div#div2
{
	transform:translate(50px,100px);
}

移動

rotate() 方法

  transform:rotate(30 deg);

<img style="transform:rotate(30deg);"
  src="../css/filters/pineapple.jpg">

旋轉

scale() 方法

<div style="transform: scale(2,3);">
div 元件的寬度是原始大小的二倍，
         高度是原始大小的三倍。
</div>

改變大小

scale() 方法也可做圖文翻轉:

      <table>
         <tr>
            <td style = "transform: scaleX(-1);transform: scaleX(-1);">Text</td>"
            <td>Text
         </tr>
         <tr>
            <td style = "transform: scale(-1,-1);">Text</td>
            <td style = "transform: scaleY(-1);">Text</td>
         </tr>
      </table>

Flip

skew() 方法

該元件會根據橫向（X軸）和垂直（Y軸）線參數給定角度：

<div style="transform: skew(30deg, 20deg);">
</div>

傾斜

matrix() 方法

matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。

<div style="transform:matrix(0.866,0.5,-0.5,0.866,0,0);">
</div>

matrix

濾光鏡(filter)

filter CSS屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像，背景和邊框的渲染。

Alpha

語法:
STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,
StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
說明：
Opacity:起始值，取值為0-100,0為透明，100為原圖.
FinishOpacity:目標值.
Style：1或2或3
StartX：任 ?
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="40",Style="2")

Blur

語法:
STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
說明：
Add:一般為1，或0.
Direction:角度,0-315度，步長為45度.
Strength:效果增長的數值,一般5即可.
例子：filter:Blur(Add="1",Direction="45",Strength="5")

創建高速度移動效果，即模糊效果.

img {	// 較大的值會產生更多的模糊。
  filter: blur(5px);
}

例一:透明懸停
例二:背景模糊

brightness

調整圖像的亮度。

0% 將使圖像全黑。
100% (1) 是預設值，代表原始圖像。
超過 100% 的值將提供更明亮的結果。

img { filter: brightness(200%);}

例:更明亮的圖像

除色濾鏡chroma

語法:
STYLE="filter:Chroma(Color=color)"
說明:
color:#rrggbb格式，任意.
例子：filter:Chroma(Color="#FFFFFF")

contrast

調整圖像的對比度。

0% 將使圖像全黑。
100% (1) 是預設值，代表原始圖像。
超過 100% 的值將提供對比度更高的結果。

img {
  filter: contrast(200%);
}

例:更明亮的圖像

drop-shadow

對圖像應用投影效果。

filter: drop-shadow(h-shadow v-shadow blur spread color)

可能的值：

h-shadow - 必需。指定水平陰影的像素值。負值將陰影置於圖像的左側。
v-shadow - 必需。指定垂直陰影的像素值。負值將陰影置於圖像上方。
blur - 可選。這是第三個值，必須以像素為單位。為陰影添加模糊效果。較大的值會產生更多的模糊（陰影變得更大更亮）。不允許使用負值。如果未指定值，則使用 0（陰影的邊緣是銳利的）。
spread - 可選。這是第四個值，必須以像素為單位。正值會導致陰影擴大變大，負值會導致陰影縮小。如果未指定，它將為 0（陰影將與元素大小相同）。注意：Chrome、Safari 和 Opera 以及其他瀏覽器不支持第 4 個值；如果添加，它將不會呈現。
color - 可選。為陰影添加顏色。如果未指定，顏色取決於瀏覽器（通常為黑色）。

創建紅色陰影的示例，水平和垂直均為 8px，模糊效果為 10px：

filter: drop-shadow(8px 8px 10px red);

提示：此濾鏡類似於 box-shadow 屬性。
陰影效果

grayscale(%)

將圖像轉換為灰度。

filter: grayscale(50%)；

0% (0) 是預設值，代表原始圖像。
100% 將使圖像完全變灰（用於黑白圖像）。

注意：不允許使用負值。

例:圖像變灰色

hue-rotate

在圖像上應用色調旋轉。
該值定義將調整圖像樣本的色環周圍的度數。

0deg 是預設值，代表原始圖像。

注意：最大值為 360 度。

filter: hue-rotate(90%)；

例:色調旋轉

invert

反色:反轉圖像中的樣本。

0% (0) 是預設值，代表原始圖像。
100% 將使圖像完全倒置。

注意：不允許使用負值。

filter: invert(100%)；

例:反轉圖像

opacity

設置圖像的不透明度級別。其中：

0% 是完全透明的。
100% (1) 是預設值，代表原始圖像（無透明度）。

注意：不允許使用負值。
提示：此濾器類似於不透明度屬性。

filter: opacity(30%)；

例:不透明度

saturate

使圖像飽和。

0% (0) 將使圖像完全不飽和。
100% 是預設值，代表原始圖像。
超過 100% 的值提供超飽和結果。

注意：不允許使用負值。

filter: saturate(800%)；

例:圖像飽和

sepia(%)

將圖像轉換為棕褐色。

0% (0) 是預設值，代表原始圖像。
100% 將使圖像完全棕褐色。

注意：不允許使用負值。

filter: sepia(90%)；

例:棕褐色圖像

例:各種濾鏡

url()

url() 函數獲取指定 SVG（Scalable Vector Graphics）濾鏡的 XML 文件的位置，並且可能包含特定濾鏡元素的錨點。

例子：

filter: url(svg-url#element-id)

initial

初始將此屬性設置為其預設值。
例:初始

inherit

從其父元素繼承此屬性。
例:繼承

透明懸停效果(Transparent Hover Effect)

opacity 屬性通常與 :hover 選擇器一起使用來更改鼠標懸停時的不透明度：

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

當用戶將鼠標懸停在圖像上時圖像不透明。這個 CSS 是 opacity:1;。
當鼠標指針離開圖像時，圖像將再次透明。

透明懸停

DOM 動畫

創建動畫容器

使用一個簡單的網頁，含有容器元素。所有動畫元素都應該與該容器元素相對。

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id ="container">
  <div id ="animate">動畫在此進行</div>
</div>

</body>
</html>

設計元素樣式

容器元素應使用 style = "position: relative" 創建。
動畫元素應使用 style = "position: absolute" 創建。

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}

動畫程式碼

JavaScript 動畫是經由元素樣式進行編程來實現的。
這些更改由計時器調用。當定時器間隔小時，動畫看起來是連續的。

id = setInterval(frame, 5);

function frame() {
  if (/* test for finished */) {
    clearInterval(id);
  } else {
    /* code to change the element style */
  }
}

例如:

function myMove() {
  let id = null;
  const elem = document.getElementById("animate");
  let pos = 0;
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}

例題: animation.html

參考資料

    CSS filter Property
    DOM Animation
    svgprimer
    svg
    svg filters
SVG濾鏡原理以及應用方式
    Internet & World Wide Web How to Program
    Deitel, Deitel and Nieto, Pretice Hall, 2002.
    itread01.com