彈出縮放視圖

主視圖由靜態影像、放大影像、高亮導航區域和提示資訊組成。

如果所檢視的影像尺寸不符合彈出縮放檢視的尺寸,影像內容會置於彈出縮放檢視的矩形顯示區域中。

主視圖的CSS屬性

主檢視的外觀是使用下列CSS類別選擇器來控制:

.s7flyoutviewer .s7flyoutzoomview

CSS屬性

說明

背景色

主視圖的背景顏色。

示例——使主視圖透明:

.s7flyoutviewer .s7flyoutzoomview { 
 background-color: transparent; 
}

彈出檢視的CSS屬性

彈出檢視的外觀是使用下列CSS類別選取器來控制:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

CSS屬性

說明

左側

彈出視圖相對於主視圖左上角的水準位置。

頂部

彈出視圖相對於主視圖左上角的垂直位置。

width

彈出視圖的寬度。

height

彈出式視圖的高度。

border

飛出視圖的邊界。

範例——若要將彈出式檢視設為600 x 400像素,在上例中顯示的512 x 288主檢視右側偏移100像素:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom { 
 left: 612px; 
 top: 0px; 
 width: 600px; 
 height: 400px;  
}

主檢視中反白顯示的CSS屬性

主檢視中反白顯示的外觀會使用下列CSS類別選擇器加以控制:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

您可使用CSS來控制背景、邊框、透明度和類似屬性。 不過,反白顯示DOM元素的大小和位置由檢視器邏輯管理。 不支援透過CSS覆寫它。

CSS屬性

說明

背景色

反白顯示的顏色。

不透明度

反白顯示不透明度。

對於Internet Explorer 8,請使用 filter:alpha(opacity-...);

邊界

邊框反白顯示。

範例——若要設定具有40%透明度的綠色反白顯示,以及一個像素紅色邊框:

.s7flyoutviewer .s7flyoutzoomview .s7highlight { 
 background-color: green; 
 opacity: 0.4;  
 filter: alpha(opacity = 40); 
 border: 1px solid red; 
}

游標的CSS屬性

highlightmode參數設為cursor時,主視圖中的反白顯示將替換為固定大小的游標圖稿,該圖稿由CSS類選擇器控制:

 .s7flyoutviewer .s7flyoutzoomview 
.s7cursor

您可以使用CSS來控制背景影像和大小。

適用的CSS屬性包括:

CSS屬性

說明

背景影像

游標圖稿。

寬度

游標寬度。

高度

游標高度。

注意

游標支援input屬性選擇器,它可用於為不同設備應用不同的游標圖稿和大小。 尤其是,input="mouse"對應於案頭系統,input="touch"對應於觸摸設備。

覆蓋的CSS屬性

overlay參數設為1時,會使用CSS類別選擇器控制反白顯示影格或游標影像的周圍區域:

 .s7flyoutviewer .s7flyoutzoomview 
.s7overlay

CSS屬性

說明

背景色

覆蓋顏色。

不透明度

覆蓋不透明度。

提示訊息的CSS屬性

提示訊息的外觀是使用下列CSS類別選擇器來控制:

.s7flyoutviewer .s7flyoutzoomview .s7tip

您可以透過CSS來設定字型樣式、大小外觀和垂直偏移。 不過,水準對齊方式是由檢視器邏輯管理。 不支援使用leftright屬性,透過CSS來覆寫它。

CSS屬性

說明

底部

從主視圖底部偏移。

color

文字色彩.

font-family

字型名稱。

字型大小

字型大小.

填補

在消息文本週圍填充。

背景色

訊息文字的背景填色顏色。

邊框半徑

消息文本的背景邊框半徑。

不透明度

訊息文字的背景不透明度。

對於Internet Explorer 8,請使用 filter:alpha(opacity-...))

提示訊息可以本地化。 如需詳細資訊,請參閱使用者介面元素的本地化

示例——要設定半透明的尖端消息,其中顯示白色的Arial 12像素字型、距主視圖底部50像素的偏移、填充和圓角邊框:

.s7flyoutviewer .s7flyoutzoomview .s7tip { 
bottom: 50px; 
color: #ffffff; 
font-family: Arial; 
font-size: 12px; 
padding-bottom: 10px; 
padding-top: 10px; 
padding-left: 12px; 
padding-right: 12px; 
background-color: #000000; 
border-radius: 4px; 
opacity: 0.5; 
filter: alpha(opacity = 50); 
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now