如何在可滚动的div中创建图像

Question

我有一个div，一个图像（arrow.gif），另一个图像（Untitled-1.jpg），两个文本框和一个按钮。
我想在带有图像的可滚动div中移动arrow.gif。

但是我在将div创建为可滚动的div（使Untitled-1.jpg填充div）并基于Untitled-1.jpg的坐标移动arrow.gif时遇到麻烦。 谁能帮我这个？ 任何帮助/协助将不胜感激。

<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
border: 5px black solid;
background-color: #F2F2F2;
cursor: pointer;
background-image:url('Untitled-1.jpg');
background-repeat: no-repeat;
background-size: fixed;

width:1030px;
height:912px
}
#thing {
position: relative;
left: 50px;
top: 50px;
height: 68px;
width: 41px;
transition: left .5s ease-in, top .5s ease-in;
z-index: 10000;

}
</style>
</head>


<body>
<div id="contentContainer">
<img id="thing" src="arrow.gif" >
</div>

<form method="post" action="">
<input type="button" value="submit" name="submit" onclick="getClickPosition()">
<input type="text" id="valuex" name="valuex">
<input type="text" id="valuey" name="valuey">
</form>

<script src="prefixes.min.js"></script>
<script>



function getClickPosition() {
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var x1 = document.getElementById('valuex').value;
var y1 = document.getElementById('valuey').value;
var parentPosition = getPosition(x1.currentTarget);
var parentPosition = getPosition(y1.currentTarget);
var xPosition = x1 - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = y1- parentPosition.y - (theThing.clientHeight / 2);

theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}

function getPosition(element) {
var xPosition = 0;
var yPosition = 0;

while (element) {
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
    element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
</script>
</body>
</html>

Answer 1

我要注意的第一件事是您拥有：

background-size: fixed;

固定不是background-size属性的选项。

您还有：

height:912px

缺少分号，将进一步破坏样式表。

1）全尺寸背景

如果您想让'Untitled-1.jpg'图片填充整个框架，则可以将background-size设置为cover或contains 。

2）可滚动的div

为了将div更改为可滚动的div，您可以按照以下步骤操作：

#div{
     width:1030px;
     height:912px;
     overflow: auto;
     }

如果溢出自动超出范围，则溢出自动会将水平和垂直滚动条添加到div。 如果希望滚动条在div上始终可见，也可以使用滚动。

您也可以使用overflow-x和overflow-y指定希望滚动条显示的方向。

3）搬东西

您在正确的位置设置事物的位置，尽管其中包含一些技巧性的东西，但要使它们全部起作用。 见我的小提琴。

演示版

我已经对您的代码进行了一些修改，但是在这个小提琴中，您可以使用坐标框更改事物在可滚动div中的位置。

https://jsfiddle.net/8y0qhdwx/

我不确定您的前进方向，但是值得研究HTML5 canvas元素，因为它是为处理其中对象的位置而构建的。

希望这可以帮助。

如何在可滚动的div中创建图像

问题描述

1 个解决方案

解决方案1
0 2015-07-29 13:26:41

1）全尺寸背景

2）可滚动的div

3）搬东西

演示版

如何在可滚动的div中创建图像

问题描述

1 个解决方案

解决方案1 0 2015-07-29 13:26:41

1）全尺寸背景

2）可滚动的div

3）搬东西

演示版

解决方案1
0 2015-07-29 13:26:41