JS+CSS3を使ってマウスの動きに応じた画像の拡大・縮小を実現する方法-jsチュートリアル-php.cn

JS+CSS3を使ってマウスの動きに応じた画像の拡大・縮小を実現する方法

php中世界最好的语言

リリース： 2018-06-01 11:12:01

オリジナル

2186 人が閲覧しました

今回はJS+CSS3を使ってマウスの動きに連動した画像の拡大・縮小を実現する方法を紹介します。以下に実際のケースを示しますので、見てみましょう。今日NetEaseのWebサイトを見ていたら、マウスを置くと画像が拡大され、遠ざかると縮小されることがわかりましたので、自分で試してみた結果は次のとおりです。

方法 1: js と css3 を使用します効果は図に示すとおりです:

この実装は非常に簡単で、js の

mouseover

と mouseout イベントを使用するだけですが、途中でズームインして後でもう一度試してみる方法がわかりません。コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
  <title>网易图片动画</title>
  <style>
    p.img {
      width: 220px;
      height: 170px;
      margin: 200px auto;
      overflow: hidden;
    }
    img.bigger {
      width: 100%;
      height:100%;
    }
    @keyframes bigger {
      from {width: 100%;height: 100%;}
      to {width: 110%; height: 110%;}
    }
    @keyframes smaller {
      from {width: 110%;height: 110%;}
      to {width: 100%; height: 100%;}
    }
  </style>
</head>
<body>
  <p class="img">
    <img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">
  </p>
  <script>
    var img = document.querySelector("img");
    img.onmouseover = function () {
      img.style.cssText = "animation: bigger 2s;width:110%; height:110%;";
    }
    img.onmouseout = function () {
      img.style.cssText = "animation: smaller 2s";
    }
  </script>
</body>
</html>

ログイン後にコピー

方法 2: css3 メソッドを使用しますcss3 は確かに私たちをもたらしてくれました。多くのメリットがあり、問題への対処が容易になります。これは

を使用することで実現できますが、これはホバーと組み合わせて使用する必要があり、より良い結果を得るためにトランジションの継続時間は適切に設定されます。これ以上の手間をかけずに、効果は次のようになります。はい、それ自体を中心から拡大することにより効果が得られます。

しかし、transform:scale();transform-origin

属性を追加する限り、次のように変更の中心点を適切に制御できます。

transform-origin: 0 0;
transform-origin: 100% 0;
transform-origin: 0 100%;
transform-origin: 100% 100%;

ログイン後にコピー

は、左上隅、右上隅、左下隅、および下隅からの拡張を意味しますご想像のとおり、デフォルトの transform-origin

は 50% 50% です。
ソースコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
  <title>网易图片动画</title>
  <style>
    p.img {
      width: 220px;
      height: 170px;
      margin: 200px auto;
      overflow: hidden;
    }
    img.bigger {
      width: 100%;
      height:100%;
      transition:transform 2s;
    }
    img.bigger:hover{
      transform: scale(1.2,1.2);
    }
  </style>
</head>
<body>
  <p class="img">
    <img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">
  </p>
</body>
</html>

ログイン後にコピー

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

jQuery.i18n を使用してフロントエンド国際化を実装する方法とは何ですか

jQuery.i18n.properties を使用して JS コードを国際化する方法

以上がJS+CSS3を使ってマウスの動きに応じた画像の拡大・縮小を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。