JS+CSS3 はマウスと画像間のインタラクティブな拡大効果を実現します-jsチュートリアル-php.cn

JS+CSS3 はマウスと画像間のインタラクティブな拡大効果を実現します

php中世界最好的语言

リリース： 2018-05-12 15:43:56

オリジナル

2136 人が閲覧しました

今回は、マウスと画像の間のインタラクティブな拡大効果を実現するための 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 サイトの他の関連記事にご注目ください。推奨読書:

Angularテンプレート駆動型フォームメソッドの詳細な説明