Efeito do ícone

Última atualização em 2023-05-20
  • Criado para:
  • Developer
    User

O indicador de zoom é sobreposto na área de exibição principal. Ela é exibida quando a imagem está em um estado redefinido e também depende do parâmetro iconeffect.

Propriedades CSS da área do visualizador principal

A aparência da área de visualização é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7pageview .s7iconeffect

Propriedade CSS

Descrição

background-image

Arte do indicador de zoom.

background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS .

largura

Largura do indicador de zoom em pixels.

altura

Altura do indicador de zoom em pixels.

OBSERVAÇÃO

O efeito de ícone suporta o media-type seletor de atributos, que você pode usar para aplicar diferentes efeitos de ícone em diferentes dispositivos. Em especial, media-type='standard' corresponde a sistemas desktop nos quais a entrada do mouse é normalmente utilizada e media-type='multitouch' corresponde a dispositivos com entrada por toque.

Exemplo - para configurar um indicador de zoom de 100 x 100 pixels com arte diferente para sistemas de desktop e dispositivos de toque.

.s7ecatalogsearchviewer .s7pageview .s7iconeffect {
 width: 100px;
 height: 100px;
}
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='standard'] {
 background-image:url(images/v2/IconEffect_zoom.png);
}
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='multitouch'] {
 background-image:url(images/v2/IconEffect_pinch.png);
}

Nesta página