Como criar um efeito de lente de aumento em um site

Autor: Christy White
Data De Criação: 11 Poderia 2021
Data De Atualização: 22 Novembro 2024
Anonim
PhotoShop - Efeito Lupa
Vídeo: PhotoShop - Efeito Lupa

Contente

Oferecer aos visitantes da sua página da internet a oportunidade de olhar detalhadamente uma imagem requer um pouco de manipulação dessas figuras. Adicionando um pouco de CSS, JavaScript e jQuery à composição você pode criar o efeito de uma lupa, conforme o ponteiro do mouse se move sobre uma imagem em sua página. Esse efeito é conseguido através da criação de uma pequena janela que exibe a imagem de fundo, quando o ponteiro do mouse se move sobre a imagem exibida em primeiro plano.


Instruções

Ofereça aos visitantes da sua página da internet um "close-up" da imagem (Brand X Pictures/Brand X Pictures/Getty Images)

  1. Inclua o JavaScript e o jQuery na seção "head" do código HTML com as instruções:

    Nesse exemplo, a biblioteca jQuery está localizada no diretório HTML padrão.

  2. Insira uma marca CDATA para impedir as tentativas do navegador de analisar os operadores do jQuery:

  3. Defina as variáveis da altura e da largura usadas para exibir as imagens:

    var W = 743; var H = 1155; var w = 192; var h = 300;

  4. Defina as condições que colocam em funcionamento a função de ampliação. Quando chamada, essa função substitui o ponteiro do mouse por um visor circular da maior imagem coberta, quando o usuário passa o mouse sobre a imagem menor, mostrada na página. Crie essa ocorrência com o código:


    $(document).ready(function() {

    $("#myimage").mouseover(function(e) { $(document).mousemove(myMM); $("#glass").fadeIn('fast'); });

    });

  5. Defina a função de ampliação e os parâmetros de finalização. Nesse exemplo, a imagem oculta é ampliada em duas vezes o tamanho da figura menor e a janela de ampliação desaparece quando o ponteiro do mouse se move para fora dos limites da imagem menor. Você pode fazer isso com o código:

    function myMM(e) { var myImage = $("#myimage"); var glassImage = $("#glass-image"); var glass = $("#glass"); var xs = e.pageX - myImage.offset().left; var ys = e.pageY - myImage.offset().top; var bx = glassImage.width()/2 - xsW/w; var by = glassImage.height()/2 - ysH/h; glass.css("left",e.pageX-75-89+"px").css("top",e.pageY-75-10+"px"); glassImage.css("background-position",bx+"px "+by+"px"); if (bx<-W || by<-H || bx>150 || by>150) { myImage.unbind('mousemove',myMM); glass.fadeOut('fast'); } }


  6. Feche o “script” do jQuery e a exclusão do analisador CDATA com as instruções:

    // ]]>

  7. Defina o layout de página com CSS para posicionar a imagem de fundo maior e os limites da janela de ampliação com o código:

    type="text/css"> #monaimage { margin-left: 200px; } #glass { background-repeat:no-repeat; background-position:top left; width:250px; height:170px; padding-top:10px; padding-left:89px; margin:0; position:absolute; display:none; } #glass-image { background-image:url('myImageLarge.jpg'); width:150px; height:150px; border-radius: 75px; -moz-border-radius: 75px; background-repeat:no-repeat; background-color:#fff; margin:0; padding:0; cursor:none; }

  8. Escreva o código HTML para exibir a página na seção "body":

    >

    Move mouse over the image

Dicas

  • Esse código depende do CSS3 para criar um campo de ampliação redondo e pode não funcionar em navegadores mais antigos. Para ter compatibilidade com versões anteriores com implementações de CSS mais antigas, defina um campo retangular para "#glass-image" (lupa).

Aviso

  • Sem as marcas CDATA, os navegadores tentam analisar os operadores menor que "<" e maior que ">" como marcas HTML. Sempre envolva os operadores JavaScript e jQuery com as marcas CDATA para evitar falhas de “script”.