所以我是个新手(我确信我的代码显示为:P),我必须创建在div标签中包含图像的代码。必须这样。一旦打开文档,图像(div)将显示在一个随机位置。每次单击图像(div),图像单独移动到另一个随机位置。它不会复制自己。只是移动。我有过其他“更好”的尝试,但经过所有的编辑和修改,我得到的只是左上角的图像。
我尝试了很多东西,但都失败了。显然失败是因为代码太糟糕。我尝试了onclick事件等的变体......我知道许多错误是可见的。这不是我认为逻辑合理且应该工作的示例之一。这是一个“我在做什么”的示例
<script>
function fpos () {
var img = document.getElementById('myImage') //is this needed at all?
var x = Math.floor(Math.random()*600);
var y = Math.floor(Math.random()*600);
var z = Math.floor(Math.random()*600);
}
function rmove() {
img.style.top = x + 'px';
img.style.left = y + 'px';
}
</script>
</head>
<body onload="fpos">
<div style = position:absolute; onclick="rmove" >
<img id="myImage" src='images/iasip.jpeg'> </img>
</div>
</body>
3条答案
按热度按时间mo49yndu1#
别担心,试着隔离一些代码,以便我们可以查看它。
打开文档后,图像(div)将显示在随机位置。
通过右键单击〉检查〉属性检查元素的属性,你会发现你可以访问的所有javascript属性,一旦你用选择器选择了元素(例如document.querySelector)
尝试一些东西,我认为最简单的方法是使用元素。风格。转换=“翻译(x,y)”像x。风格。转换=“翻译(10 px,20 px)";
sg3maiej2#
这是我刚刚拼凑出来的一个示例。
基本上,您需要创建一个函数,通过计算高度和宽度的随机数,然后乘以窗口的大小,使该数字可以跨越屏幕的整个宽度/长度,每次移动图像。
然后,您可以将
'px'
添加到计算的末尾,以使用像素作为单位,并将其设置为图像的left
和top
属性,以使用绝对位置(坐标)将其从屏幕的左侧和顶部移动那么远。yyyllmsg3#
所以,首先,不要把这个错误的方式,我的人,但你必须张贴一些代码,向我们展示你的工作。使所有的故障排除的差异。
也就是说,你需要用JS来做。首先目标是图像元素。可以使用querySelector来命中class或id,或者只命中getElementById。
然后添加一个事件监听器,在一个随机坐标上呈现它。
可以像示例中那样内联执行该操作,也可以将其添加到脚本文件中。