我想在Javascript中获得一个对象在页面上的绝对x,y位置.我怎样才能做到这一点？
我试过obj.offsetTop和obj.offsetLeft,但这些只给相对于父元素的位置.我想我可以循环并添加父级的偏移量及其父级的偏移量,依此类推,直到我找到没有父级的对象,但似乎应该有更好的方法.谷歌搜索没有太多,甚至SO网站搜索没有找到任何东西.
另外,我不能使用jQuery.
有关突出显示我的问题和潜在解决方案的图片,请参阅以下帖子:
CSS overflow-y:visible,overflow-x:scroll
但是,当您实际移动滚动条时,此策略会中断.在建议的实现(position: fixed;)中,工具提示在其位置预滚动的子div旁边显示.因此,当您将新的子div转换为视图时,工具提示开始从页面底部掉落.
请参阅此处以获取该错误的演示:http://jsfiddle.net/narcV/4/
任何想法我如何使工具提示始终显示在子div旁边？
我每100毫秒获得一次位置并将它们应用到DOM中,如下所示:
const div = d3.select(container).selectAll('div').data(positions)
div.enter()
.append('div')
div.transition()
.duration(100)
.style({
top: d => d.y,
left: d => d.x,
})
div.exit()
.remove()
因此,元素可以在100毫秒内获得平滑动画,以获得下一个位置所需的100毫秒.这很好用.
但我在DOM中有不同的元素依赖于第一个元素的位置.它们使用相同的位置数据进行渲染,但是在软件的不同模块中.
我的问题是,这种转换会插入其他模块无法获得的数据.这些其他模块的元素似乎提供了"光学错误"的可视化,因为它们基于原始数据.
示例:一个点移动到一个正方形并且正方形被突出显示,但是点的位置被插值,并且正方形用于检查是否应该突出显示的位置不是.因此,即使该点不在其中,方形也会突出显示.
我该如何解决这个问题？我可以在某处获取那些内插值吗？
作业说:"你的任务是写一个包含JavaScript的HTML文件,它将随机显示上面的一个图像.如果页面在浏览器中刷新,你应该得到另一个随机图像." 所以我做到了
现在它说"当用户点击图像上的任何位置时,显示一个警告窗口,显示点击相对于图像的位置的X和Y位置".这是我的代码:
<html>
<head>
<title>Assignment 2</title>
<script type="text/javascript">
var imageURLs = [
"p1.jpg"
, "p2.jpg"
, "p3.jpg"
, "p4.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(getImageTag());
</script>
</body>
</html>javascript ×4
css ×2
html ×2
coordinates ×1
d3.js ×1
dom ×1
image ×1
offset ×1
overflow ×1
styles ×1