弹出缩放视图 flyout-zoom-view

主视图由静态图像和弹出视图中显示的缩放图像组成。 此外,它还包括显示在静态图像上的高亮导航区域,以及显示在静态图像顶部的提示消息。

如果正在查看的图像的尺寸与弹出缩放视图的尺寸不匹配,则图像内容将居中在弹出缩放视图的矩形显示区域中。

主视图的CSS属性

主视图的外观由以下CSS类选择器控制:

.s7flyoutviewer .s7flyoutzoomview
CSS属性
说明
background-color
主视图的背景颜色。

示例 — 使主视图透明:

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

弹出视图的CSS属性

弹出视图的外观由以下CSS类选择器控制:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
CSS属性
说明
左侧
弹出视图相对于主视图左上角的水平位置。
顶端
弹出视图相对于主视图左上角的垂直位置。
width
弹出视图的宽度。
height
弹出视图的高度。
边界
弹出视图的边框。

示例 — 将弹出视图设置为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属性
说明
background-color
高亮显示的颜色。
不透明度

突出显示不透明度。

对于Internet Explorer 8,使用 滤镜:alpha(不透明度 — ...) );

边界
边框高亮显示。

示例 — 要设置透明度为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属性
说明
background-image
光标图稿。
width
光标宽度。
height
光标高度。
NOTE
光标支持 input 属性选择器,可用于为不同的设备应用不同的光标图稿和大小。 特别是, input="mouse" 与桌面系统和 input="touch" 对应于触摸设备。

叠加的CSS属性

overlay 参数设置为 1,高亮框架或光标图像周围的区域由CSS类选择器控制:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay
CSS属性
说明
background-color
叠加颜色。
不透明度
叠加不透明度。

提示消息的CSS属性

使用以下CSS类选择器控制提示消息的外观:

.s7flyoutviewer .s7flyoutzoomview .s7tip

可以通过CSS配置字体样式、大小、外观和垂直偏移。 但是,水平对齐是由查看器逻辑管理的。 使用以下方式通过CSS覆盖 leftright 不支持属性。

CSS属性
说明
底部
从主视图底部偏移。
color
文本颜色。
font-family
字体名称。
font-size
字体大小.
填充
在消息文本周围填充。
background-color
消息文本的背景填充颜色。
border-radius
消息文本的背景边框半径。
不透明度

消息文本的背景不透明度。

对于Internet Explorer 8,使用 滤镜:alpha(不透明度 — ...) )

可对提示消息进行本地化。 参见 用户界面元素的本地化 了解更多信息。

示例 — 要设置半透明提示消息,其中使用白色Arial® 12-px字体、距主视图底部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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8