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);
                }
            });

Answer 2

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

实施例： http://www.gayadesign.com/scripts/jqueryphotonav/

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

Answer 3

这样的东西？

＆＃13;

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';
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我如何编写脚本使我的全景图像可以左右平移到其边缘？

3 个答案: