Como ampliar a imagem e ampliar a imagem usando JavaScript?
JavaScript pode ser usado para manipular a propriedade de estilo de um elemento HTML para criar um efeito de zoom e zoom. Para fazer isso, basta acessar o atributo de largura usando a propriedade de estilo e aumentá -lo ou diminuí -lo de acordo com o requisito. Para acessar esta propriedade de estilo de um elemento HTML, uma referência ao elemento HTML deve ser criada e armazenada dentro de uma variável de JavaScript. Vamos passar pelo procedimento passo a passo para alcançar a tarefa em questão.
Etapa 1: Configurando o documento HTML
Comece criando um novo documento HTML com as seguintes linhas dentro dele:
Nas linhas acima:
- Primeiro, um novo elemento de imagem está sendo criado com o URL local para uma imagem que será exibida no documento HTML.
- O elemento da imagem tem o ID definido para "foto" para que o JavaScript possa fazer referência a ele.
- Depois disso, crie um novo botão, "Mais Zoom", com a propriedade OnClick que procurará a função mais Zoom() no arquivo de script ou na tag de script.
- Depois disso, crie um novo botão, "Reduzir o zoom", que foi criado com a propriedade OnClick que procurará a função Reduzir o zoom() no arquivo de script ou na tag de script.
A execução do documento HTML neste momento produzirá a seguinte saída no navegador:
Etapa 2: Adicionando funcionalidade usando JavaScript
Na segunda etapa, crie uma tag de script no mesmo documento HTML ou crie um novo arquivo JavaScript e vincule -o ao documento HTML. Não importa o caso, a primeira coisa em JavaScript é criar a função para o botão Zoom-in com as seguintes linhas de código:
função zoomin ()
var pic = documento.getElementById ("pic");
var largura = foto.largura de cliente;
foto.estilo.largura = largura + 100 + "px";
No trecho de código acima:
- Função Zoomin () foi criada que será chamada toda vez que o botão de zoom é clicado.
- Dentro da função, a primeira etapa é obter a referência do elemento de imagem usando seu ID e armazená -lo dentro da variável "foto".
- Depois disso, obtenha a largura atual do elemento de imagem usando o atributo de largura do cliente.
- E depois acesse a propriedade de estilo e o atributo de largura na propriedade Style e aumente seu valor adicionando alguns pixels na largura atual da imagem.
Isso imitará um efeito de zoom na imagem toda vez que o botão de zoom é clicado.
Depois disso, crie a função para o botão de zoom-out usando as seguintes linhas:
função zoomout ()
var pic = documento.getElementById ("pic");
var largura = foto.largura de cliente;
foto.estilo.largura = largura - 100 + "px";
No trecho de código acima:
- Função Zoomout () foi criada que será chamada toda vez que o botão de zoom-out for clicado.
- Dentro da função, a primeira etapa é obter a referência do elemento de imagem usando seu ID e armazená -lo dentro da variável "foto".
- Depois disso, obtenha a largura atual do elemento de imagem usando o atributo de largura do cliente e armazene -o dentro do "largura" variável.
- E depois acesse a propriedade de estilo e o atributo de largura na propriedade Style e diminua seu valor removendo alguns pixels da largura atual do elemento de imagem.
Isso imitará um efeito de zoom na imagem toda vez que o botão de zoom-out for pressionado.
Etapa 3: testando a funcionalidade
A última etapa para executar o documento HTML e observar o funcionamento do documento HTML para ser como:
Como fica claro no GIF acima de que o zoom e o botão de zoom-out estão funcionando perfeitamente como pretendido.
Embrulhar
É muito fácil imitar um mais Zoom e a Reduzir o zoom efeito em um imagem elemento com a ajuda do JavaScript. Depois que o documento HTML estiver configurado, vá para o arquivo JavaScript e acesse o largura propriedade da imagem. E então altere o valor disso largura propriedade de acordo com o botão que foi pressionado pelo usuário.