Como criar um efeito de lente de aumento em um site

Escrito por finn mccuhil | Traduzido por césar campos
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar um efeito de lente de aumento em um site
Ofereça aos visitantes da sua página da internet um "close-up" da imagem (Brand X Pictures/Brand X Pictures/Getty Images)

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.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

Instruções

  1. 1

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

    <script type=”text/javascript” src=”jquery.js”></script> <script type=”text/javascript”></script>

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

  2. 2

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

    <![CDATA[

  3. 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. 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. 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. 6

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

    // ]]> </script>

  7. 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:

    <style 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; } </style> </head>

  8. 8

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

    <body>

    <p>Move mouse over the image</p> <img id="myimage" title="Magnification Example" src="myimageSmall.jpg" alt="The Big Picture" /> <div id="glass"><div id="glass-image"></div></div>

    </body>

    </html>

Dicas & Advertências

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

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível