頁面檢視

主視圖由目錄影像組成。 您可以滑動它以移至其他頁面或縮放。

主檢視器區域的CSS屬性

檢視區域的外觀會使用下列CSS類別選擇器加以控制:

.s7ecatalogsearchviewer .s7pageview

CSS屬性

說明

背景色

以十六進位格式顯示主視圖的背景顏色。

游標

顯示在主視圖上的游標。

示例——使主視圖透明。

.s7ecatalogsearchviewer .s7pageview { 
 background-color: transparent; 
}

在案頭系統上,元件支援cursortype屬性選擇器,該選擇器可應用於.s7pageview類,並基於元件狀態和用戶操作控制游標的類型。 支援下列cursortype值:

說明

default

當影像因影像解析度小、元件設定或兩者皆無法縮放時顯示。

可放大影像時顯示。

重設

當影像處於最大縮放層級時顯示,並可重設為初始狀態。

拖曳

當使用者平移處於縮放狀態的影像時顯示。

投影片

當使用者透過水準滑動或輕拂來執行影像切換時顯示。

以視覺化方式分隔目錄跨頁的左和右頁面的分頁線,由下列CSS類別選擇器控制:

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

CSS屬性

說明

width

頁面分隔線的寬度。 設為 0 px可完全隱藏分隔線。

背景影像

您要用作分頁符的影像。

範例——使用半透明影像來製作40像素寬的分頁線。

.s7ecatalogsearchviewer .s7pageview .s7pagedivider { 
 width:40px; 
 background-image:url(images/sdk/divider.png); 
}
注意

frametransition修飾元設為turnauto(在案頭系統上)時,頁面分隔線的外觀會由pageturnstyle修飾元控制,並忽略.s7pagedivider CSS類別。

您可以在主檢視器區域上設定自訂滑鼠游標的顯示。 這是由套用至.s7ecatalogsearchviewer .s7pageview CSS類別的其他屬性選擇器所控制:

CSS屬性

說明

預設

通常是箭頭,針對不可縮放的影像顯示。

顯示影像何時可放大。

重設

顯示影像在最大縮放時可重設的時間。

拖曳

顯示使用者在影像中縮放時執行拖曳作業的時間

投影片

顯示使用者何時使用投影片手勢執行影像交換

示例——每種類型的元件狀態有不同的滑鼠游標。

.s7ecatalogsearchviewer .s7pageview[cursortype="default"] { 
cursor:auto; 
} 
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] { 
cursor:url(images/zoomin_cursor.cur), auto; 
} 
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] { 
cursor:url(images/zoomout_cursor.cur), auto; 
} 
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] { 
cursor:url(images/slide_cursor.cur), auto; 
} 
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] { 
cursor:url(images/drag_cursor.cur), auto; 
}

本頁內容

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