1）全尺寸背景

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'图片填充框架，您可以将背景尺寸设置为封面或的包含

2）可滚动div

为了将div更改为可滚动的div，您可以按如下方式执行此操作：

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

溢出 auto 会在div超出其范围的情况下向div添加水平和垂直滚动条。或者，如果您希望滚动条始终在div上可见，则可以使用滚动。

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

3）搬东西

你是在正确的轨道上设置事物的位置，但是有一些繁琐的东西可以让它全部运转起来。看我的小提琴。

演示

我已经修改了你的代码，但是在这个小提琴中你可以使用坐标框改变可滚动div中的东西的位置。

https://jsfiddle.net/8y0qhdwx/

我不确定你的目标是什么，但是值得研究HTML5 canvas元素，因为它是为处理对象内部的定位而构建的。

希望这有帮助。

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

1 个答案:

1）全尺寸背景

2）可滚动div

3）搬东西

演示