HTML、CSS、jQuery: 画像の縮小効果を実現するためのヒント-jsチュートリアル-php.cn

HTML、CSS、jQuery: 画像の縮小効果を実現するためのヒント

WBOY

リリース： 2023-10-27 19:34:05

オリジナル

1505 人が閲覧しました

HTML、CSS、jQuery: 画像の縮小効果を実現するためのヒント

HTML、CSS、jQuery: 画像縮小効果を実装するためのヒント

現代の Web デザインでは、クールな特殊効果を実装すると、Web ページをより魅力的にすることができます。その中でも、画像縮小効果は、Web ページ上の重要なコンテンツを強調するためによく使用されます。この記事では、HTML、CSS、jQuery を使用して画像の縮小効果を実現する方法と、具体的なコード例を紹介します。

準備
始める前に、必要なファイルとコードをいくつか準備する必要があります。まず、index.html という名前の HTML ファイルを作成します。次に、画像ファイルを保存するために、images という名前のフォルダーを作成します。 Index.html ファイルでは、CSS と jQuery を使用して画像の縮小効果を実装します。
HTMLLayout
index.html ファイルで、画像を配置するコンテナを作成する必要があります。 div 要素をコンテナとして使用できます。コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <title>图片缩小特效</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="image-container">
        <img src="images/image.jpg" alt="图片">
    </div>
</body>
</html>

ログイン後にコピー

CSS スタイル
画像の縮小効果を実現するには、CSS を使用する必要があります画像のサイズとアニメーション効果を制御します。 style.css ファイルに、次のコードを追加します。

.image-container {
    width: 500px; /* 设置容器宽度 */
    height: 500px; /* 设置容器高度 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    position: relative; /* 为了让子元素绝对定位 */
}

.image-container img {
    width: 100%; /* 将图片宽度设置为容器宽度 */
    height: auto; /* 根据图片比例自适应高度 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 图片相对于容器顶部位置 */
    left: 0; /* 图片相对于容器左侧位置 */
    transition: transform 0.5s; /* 添加动画过渡效果 */
}

.image-container img:hover {
    transform: scale(0.7); /* 当鼠标悬停时，缩小图片至原大小的70% */
}

ログイン後にコピー

jQuery action
画像の縮小効果をより適切に制御するために、jQuery を使用してマウスホバーイベントを処理できます。 script.js という名前のファイルを作成し、次のコードを追加します。

$(document).ready(function() {
    $(".image-container img").hover(
        function() {
            $(this).addClass("hovered"); /* 添加hovered类 */
        },
        function() {
            $(this).removeClass("hovered"); /* 移除hovered类 */
        }
    );
});

ログイン後にコピー

CSS アニメーション効果
画像の縮小効果をよりスムーズにするために、.hovered ファイルにいくつかのコードを追加できます。クラスCSSアニメーション効果。 style.css ファイルを変更し、次のコードを追加します。

.image-container img.hovered {
    transform: scale(0.7); /* 缩小图片至原大小的70% */
    transition: transform 0.5s; /* 添加过渡效果 */
}

ログイン後にコピー

効果のデモンストレーション
準備したindex.html、style.css、およびscript.jsファイルを保存し、ブラウザでindex.htmlファイルを開くと、画像の縮小効果が反映されている様子が確認できます。

上記の手順により、HTML、CSS、jQuery を使用して画像の縮小効果を実現しました。マウスを画像の上に置くと、画像がアニメーションして元のサイズの 70% に縮小します。この特殊効果は、Web ページの重要なコンテンツを強調するだけでなく、ユーザーエクスペリエンスも向上します。この記事のコード例が役に立ち、さまざまなクールな Web ページ効果を簡単に実装できることを願っています。

以上がHTML、CSS、jQuery: 画像の縮小効果を実現するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。