可以帮助我完成这段代码。 我需要获取图像的位置并保存在变量 PHP 中,然后在div html 中写入顶部和左侧位置。我尝试了所有方法,但我失败了谢谢
<?php
echo "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'>'n";
echo "</script>'n";
echo "<script type='"text/javascript'">'n";
echo "window.onload = function() {'n";
echo "var position = $('#image').position();'n";
echo "};'n";
echo "</script>'n";
$top = "<script> document.write(position.top) </script>";
$left = "<script> document.write(position.left) </script>";
echo "<div style='position: absolute; top: ".$top."px; left: ".$left."px; opacity: 1;'>'n";
echo "</div>";
?>
如果你的目标是将div 移动到与 #image
相同的位置,你可以完全在没有 PHP 的情况下完成。
这样的东西会起作用:
$(document).ready(function() {
var position = $('#image').position();
$('div').css('top',position.top + 'px');
$('div').css('left',position.left + 'px');
})
您可以在此处看到它的工作原理:https://jsfiddle.net/4bk852kv/
希望对您有所帮助!
服务器
端脚本在服务器将页面推送到客户端之前在服务器上进行翻译。因此,JavaScript 变量在此步骤中不可用。
作为建议,您可以修改代码以使用纯Javascript设置内部html:
<?php
echo "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'>'n";
echo "</script>'n";
echo "<script type='"text/javascript'">'n";
echo "window.onload = function() {'n";
echo "var position = $('#image').position();'n";
?>
document.write ("<div style='position: absolute; top: "+position.top+"px; left: "+position.left+"px; opacity: 1;'>"
<?php
echo "};'n";
echo "</script>'n";
?>
如果你需要 DIV 元素,如前所述,你不应该使用 PHP。此外,您的DIV需要与IMG元素相同的宽度和高度。这是为此编写的代码:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type="text/javascript">
$(window).on('load', function() {
var position = $('#image').position();
$('#info').css({
'top': position.top,
'left': position.left,
'width': $('#image').width(),
'height': $('#image').height()
});
});
</script>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/800px-Stack_Overflow_logo.svg.png" />
<div id="info" style='position: absolute; opacity: 1;'></div>
不要认为您可以在PHP(服务器)端拥有图像的位置。