javascript - 如何编写脚本以便我的全景图像可以左右摇摄到其边缘？

Question

假设我的图像(全景)长 10,000 像素，但我希望一次只能查看 1000 像素宽，为了查看更多图像，我可以将鼠标悬停在左右两侧，然后图像会相应地移动好吗？如果可能的话，一个简单的 HTML 脚本？ (我不确定如何使用 Javascript 或 CSS，但如果需要解决这个问题，请逐步指导我？

谢谢。

Answer 1

这是一个简单的 JQuery，您可以使用它在将鼠标悬停在左侧或右侧时滚动整个页面；

示例 - https://jsfiddle.net/38da9pca/

在实现它时需要任何帮助，只需发表评论，我会尽力帮助您。

$(function() {
                $('#right').on('mouseenter', rscroll);
                $('#left').on('mouseenter', lscroll);
                $('#right, #left').on('mouseleave', function() {
                    $('body').stop();
                });

                function rscroll() {
                    $('body').animate({
                        scrollLeft: '+=25'
                    }, 10, rscroll);
                }

                function lscroll() {
                    $('body').animate({
                        scrollLeft: '-=25'
                    }, 10, lscroll);
                }
            });

编辑(仅限滚动图像)

示例 - https://jsfiddle.net/38da9pca/1/

我已经更改它，因此 lscroll 和 rscroll 将影响图像的 id 而不是 body 并将其从 scrollLeft 更改为 left，这样它将移动图像滚动。 不要忘记将 $('body').stop(); 更改为 $('#bg').stop(); 否则它永远不会停止滚动

$(function() {
                $('#right').on('mouseenter', rscroll);
                $('#left').on('mouseenter', lscroll);
                $('#right, #left').on('mouseleave', function() {
                    $('#bg').stop();
                });

                function rscroll() {
                    $('#bg').animate({
                        left: '-=25'
                    }, 10, rscroll);
                }

                function lscroll() {
                    $('#bg').animate({
                        left: '+=25'
                    }, 10, lscroll);
                }
            });