在背景图像上使用 jQuery 缩放

Question

我想在背景图像上使用jQuery 缩放。 问题是，它仅适用于带有 img 标签的图像。 有没有办法在背景图像上使用它？ 我不能使用 img 标签，因为这个值来自 javascript。 例如，我有这个 div：

<div class="main-image" style="background-image: url("image.jpg");"></div>

 $(document).ready(function() {
            $('.main-image').zoom();
        });

 (function() {
                let gallerys = document.querySelectorAll('.gallery');
                gallerys.forEach(gallery => {
                    updateGalleryPictures(gallery);
                });
            })();

            function updateGalleryPictures(gallery) {
                // Get gallery's thumbnail images
                let thumbnails = gallery.querySelectorAll('.thumbnail');
                // Change the background-image property on click
                thumbnails.forEach(thumbnail => {
                    thumbnail.addEventListener('click', () => {
                        updateMainImage(gallery, thumbnail.src)
                    });
                });
                // Initialize background-image property using the 1st thumbnail image
                let firstThumbnail = thumbnails[0];
                if (firstThumbnail === null || firstThumbnail === undefined) return;
                updateMainImage(gallery, firstThumbnail.src)
            }

            function updateMainImage(gallery, src) {
                // Get main image and check if it exists
                let mainImage = gallery.querySelector('.main-image');
                if (mainImage === null) return;
                mainImage.style.backgroundImage = 'url(' + src + ')';
            }

Answer 1

以下是相关插件的源代码。https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js - 它不是为处理背景图像而设计的，正如您从https://github.com/jackmoore/zoom/blob 中看到的那样/master/jquery.zoom.js#L117和https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js#L231两个在 div 上不可用的属性。

您可能会使用纯 CSS 在 mousemove 上移动，例如：

 $('.main-image').mousemove(function(e){ var amountMovedX = (e.pageX * -1 / 2); var amountMovedY = (e.pageY * -1 / 2); $(this).css({ 'background-size': '200%', 'background-position': amountMovedX + 'px ' + amountMovedY + 'px'} ); });

 .main-image { background-image:url('https://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc'); background-size: 100%; display:block; height:200px; width:200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-image"> </div>