アイコンエフェクト icon-effect
ズームインジケーターは、メインビュー領域に重ねて表示されます。 画像がリセット状態のときに表示され、iconeffect パラメーターの設定にも依存します。
メインビューア領域の CSS プロパティ
表示領域の外観は、以下の CSS クラスセレクターを使用して制御します。
.s7zoomviewer .s7zoomview .s7iconeffect
CSS プロパティ
説明
background-image
ズームインジケーターのアートワーク。
background-position
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
詳しくは、 CSS スプライト.
width
ズームインジケーターの幅。
height
ズームインジケーターの高さ。
NOTE
アイコンエフェクトは、
media-type
属性セレクターを使用します。このセレクターを使用すると、デバイスごとに異なるアイコンエフェクトを適用できます。 特に media-type='standard'
マウス入力が通常使用されるデスクトップシステムに対応し、 media-type='multitouch'
は、タッチ入力のデバイスに対応します。例 — デスクトップシステムとタッチデバイス用に、異なるアートを持つ 100 x 100 ピクセルのズームインジケーターを設定するには、次のように記述します。
.s7zoomviewer .s7zoomview .s7iconeffect {
width: 100px;
height: 100px;
}
.s7zoomviewer .s7zoomview .s7iconeffect[media-type='standard'] {
background-image:url(images/v2/IconEffect_zoom.png);
}
.s7zoomviewer .s7zoomview .s7iconeffect[media-type='multitouch'] {
background-image:url(images/v2/IconEffect_pinch.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8