弹出缩放视图

主视图由静态图像、弹出视图中显示的缩放图像、静态图像上显示的高亮导航区域以及静态图像顶部显示的提示消息组成。

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

主视图的CSS属性

主视图的外观通过以下CSS类选择器进行控制:

.s7flyoutviewer .s7flyoutzoomview

CSS属性

说明

背景颜色

主视图的背景颜色。

示例 — 使主视图透明:

.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属性

说明

背景颜色

突出显示的颜色。

不透明度

突出显示不透明度。

对于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

文本颜色.

字体系列

字体名称。

字体大小

字体大小.

填充

在消息文本周围填充。

背景颜色

消息文本的背景填充颜色。

边框半径

消息文本的背景边框半径。

不透明度

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

对于Internet Explorer 8,请使用 filter:alpha(opacity-...))

提示消息可以本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 要设置半透明的提示消息,其中Arial字体为12px,距主视图底部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); 
}

在此页面上