JS+CSS3 で画像バインディングのマウス移動イベントを増幅-jsチュートリアル-php.cn

JS+CSS3 で画像バインディングのマウス移動イベントを増幅

php中世界最好的语言

リリース： 2018-05-23 15:44:16

オリジナル

1881 人が閲覧しました

今回は、マウス移動イベントにバインドされた拡大画像を作成する JS+CSS3 マウス移動イベントにバインドされた拡大画像を作成する 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 サイトの他の関連記事にご注目ください。

推奨書籍:

Vue.js の計算プロパティとリスナーの使用方法

JS ファイルを動的に導入する方法

以上がJS+CSS3 で画像バインディングのマウス移動イベントを増幅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。