JavaScriptを使用したホバーのイメージズーム

この記事では、JavaScriptを使用してホバーでズームイメージを作成する方法を学びます.ズーム画像は、多くの方法で作成されます.あなたが望むならば、あなたはちょうどHTMLによってイメージイメージの真ん中でズーム効果を加えることもできます.
ここで作られたデザインは、ホバーのJavaScriptイメージズームです.JavaScriptはここで使用されているので、非常に進んでいます.このプロジェクトのイメージのすべてのポイントでズームすることができます.
✅✅ ライブプレビュー👉 JavaScript Image Zoom
基本的にそれはあなたのマウスカーソルに従います.その結果、マウスを動かす画像の一部が拡大されます.しかし、CSSで画像をズームすることはできません.

ジャバスクリプト画像

まず箱を作りました.それから、私はその箱にイメージを加えました.ボックスheight: 300px、width: 500pxおよび5 pxの境界が使用されている.画像は箱の大きさに等しい.
あなたはそれを作成する3つの手順に従う必要があります.以下に、すべてのコードを与えました.しかし、これらのコードラインを使用して説明を共有しました.

HTMLコード

次のコードは、ボックスを作成し、イメージを追加するHTMLです.
ここでは二度同じイメージが使われている.

イメージは、最初に「図」で'background-image'を使って加えられました.

イメージは、後でIMGタグに加えられました.ここではonmousemove = "zoom (event)"が使用されている.その結果、画像の上にマウスを動かすと、画像がズームします.

ここに'figure'のイメージだけが拡大されます.IMGREタグを使用して追加された画像は変更されません.

下に使用されている2つの画像とは何です.

<figure class="zoom" onmousemove="zoom(event)" style="background-image: url(https://images5.alphacoders.com/343/thumb-1920-343645.jpg)">

  <img src="https://images5.alphacoders.com/343/thumb-1920-343645.jpg" />

</figure>

CSSコード

現在、CSSによってZoom Image on hoverを設計する時間です.

最初の'図'の基本的なデザインが行われている.ボックスheight: 300px、width: 500px

それから、私は、Normanイメージ(img: hover)にホバー効果を加えました.ここでは、ホヤを用いてopacity: 0が使用される.その結果、マウスの中にマウスを移動すると、IMGタグによって追加された画像は表示されません.IMGタグを使用しているイメージが見えないので、

は、背中の「図」のイメージを見ることができます.

figure.zoom {
  background-position: 50% 50%;
  position: relative;
  margin: 150px auto;
  border: 5px solid white;
  box-shadow: -1px 5px 15px black;
  height: 300px;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}

figure.zoom img:hover {
  opacity: 0;
}

figure.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
  height: 100%;
}

ジャバスクリプトコード

デザインのほとんどすべての仕事が作られます.現在、このZoom Image by JavaScriptを起動する時間です.JavaScriptは基本的にマウスカーソルに従うのを助けます.

function zoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

閉じるこの動画はお気に入りから削除されています.何か問題があればコメントしてください.私はCSSを使用して多くの画像のズーム効果を作成している.
うまくいけば、この記事からJavaScriptを使用してホバーで画像をズームする方法を学びました.