jquery 图片滚动放大

基础概念

jQuery 图片滚动放大是一种网页交互效果，当用户滚动页面时，图片会根据滚动的距离进行放大或缩小。这种效果通常用于增强用户体验，使网页内容更加生动和吸引人。

类型

滚动放大：当用户向下滚动页面时，图片逐渐放大。
滚动缩小：当用户向下滚动页面时，图片逐渐缩小。
滚动缩放：当用户向下滚动页面时，图片先放大后缩小，或先缩小后放大。

应用场景

产品展示：在电商网站或产品介绍页面中，通过滚动放大效果展示产品细节。
图片画廊：在图片画廊或相册页面中，通过滚动放大效果增强图片的视觉冲击力。
新闻网站：在新闻网站的头条图片上应用滚动放大效果，吸引用户点击阅读详细内容。

实现方法

以下是一个简单的示例代码，展示如何使用 jQuery 实现图片滚动放大效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 图片滚动放大</title>
    <style>
        body {
            height: 2000px; /* 确保页面有足够的滚动空间 */
        }
        .image-container {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .image-container img {
            width: 100%;
            height: auto;
            transition: transform 0.5s ease;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="path/to/your/image.jpg" alt="示例图片">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();
            var maxScroll = $(document).height() - $(window).height();
            var scale = 1 + (scroll / maxScroll) * 2; // 根据滚动距离计算缩放比例

            $('.image-container img').css('transform', 'scale(' + scale + ')');
        });
    </script>
</body>
</html>