Question

我一直在努力编写程序来查看500x1000的7960x8264图像。您可以使用W，S，A和D键移动视图。我知道CSS剪辑功能，我尝试使用JS来修改它。似乎没什么用，我花了很多时间在上面，所以我真的需要有经验的人帮忙。我已完成以下代码：

我已经看过this stackoverflow帖子，但我正在努力重新实现它。

＆＃13;

    window.onkeypress = function(event) {
       if (event.keyCode == 115) {
          document.getElementById("container").style.clip = "rect(0px,5000px,5000px,0px)"; //this is supposed to change what part you see (the 'focus/view'), but it will actually move the view up in thw final program.
       }
       if (event.keyCode == 119) {
          //move the view up
       }
       if (event.keyCode == 97) {
          //move the view left
       }
       if (event.keyCode == 100) {
          //move the view right
       }
    }

＆＃13;

 #clip {
    }

＆＃13;

index.html:

      <div id="container">
        <img src="img/game_resources/background/sky.jpg" />
      </div>

＆＃13;

感谢您的帮助。

Answer 1

您尝试使用的剪辑属性会将图像保留在原始位置，并且只会更改可见的部分。此外，要使剪辑正常工作，该元素必须具有position: absolute或position: fixed。

对于移动背景或天空盒，更传统的css方法是为容器提供固定大小并使用背景图像而不是<img />。然后，您可以使用background-position使用javascript移动图像。 https://jsfiddle.net/3s9rkn3x/

的示例

或者，如果您必须使用<img />标记，则可以为容器添加overflow: hidden以剪切图像，然后使用position: absolute;和{将图像放置在容器内{1}}，top: yyypx。

查看图像的一部分，并允许使用JavaScript查看图像的其他部分

1 个答案: