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

Question

假设我的图像（全景）长 10,000 像素，但我希望一次只能查看 1000 像素宽，为了查看更多图像，我可以将鼠标悬停在左或左对了，然后图像会相应地移动好吗？如果可能，HTML 上的简单脚本？（我不确定如何使用 Javascript 或 CSS，但如果需要归结为那样，请逐步指导我？

谢谢。

Answer 1

这是一个。它使用 jquery（javascript 库）。您必须添加它才能使其正常工作。

示例： http://www.gayadesign.com/scripts/jqueryphotonav/

教程： https://blog.gaya.ninja/articles/jquery-convertion-panoramic-photoviewer-in-javascript/

Answer 2

是这样的吗？

var imgView = document.querySelectorAll('.img-view')[0];
var img = imgView.querySelectorAll('img')[0];

imgView.onmousemove = function(e) {
  var x = e.clientX;
  
  var px = ((x / this.offsetWidth) * 100);
  
  var ix = ((px / 100) * img.offsetWidth);
  
  img.style.left = '-' + (ix - this.offsetWidth) + 'px';
}

.img-view {
  width: 256px;
  height: 160px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ddd;
}

.img-view img {
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}

<div class="img-view">
  <img src="http://panoramalove.com/wp-content/uploads/2013/01/nighttime-panoramic-view-of-hong-kong-island-from-the-avenue-of-stars-in-tsim-sha-tsui.jpg">
</div>

Answer 3

这是一个简单的 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);
                }
            });

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

How do I script such that my panoramic image can be panned left and right up to its edges?

html

javascript

css

panoramas