下面的Javascript似乎不适用于Chrome,Firefox和Opera。
<html>
<script>
function window_onLoad(){
var ang;
var i;
imgMid.style.posLeft = document.body.clientWidth / 2;
imgMid.style.posTop = document.body.clientHeight / 2;
ang = 6.2 / 8;
Position(div1, ang);
Position(div2, ang * 2);
Position(div3, ang * 3);
Position(div4, ang * 4);
Position(div5, ang * 5);
Position(div6, ang * 6);
Position(div7, ang * 7);
Position(div8, ang * 8);
}
function Position(objO, a){
objO.style.posLeft = imgMid.style.posLeft + Math.sin(a) * 200;
objO.style.posTop = imgMid.style.posTop - Math.cos(a) * 200;
}
</script>
<body onload="window_onLoad()">
<img id=imgMid style="position: absolute;" src="dot.gif" />
<div id=div1 style="position: absolute;">1</div>
<div id=div2 style="position: absolute;">2</div>
<div id=div3 style="position: absolute;">3</div>
<div id=div4 style="position: absolute;">4</div>
<div id=div5 style="position: absolute;">5</div>
<div id=div6 style="position: absolute;">6</div>
<div id=div7 style="position: absolute;">7</div>
<div id=div8 style="position: absolute;">8</div>
</body>
</html>
因此,它显示为imgMid
和右上角的数字,但在Safari中,它显示为imgMid
周围的数字圆圈,正如其意图所示。
答案 0 :(得分:1)
Don't use onevent
HTML attributes.
此外,load
是window
事件,不应在body
上触发。请在DOMContentLoaded
上使用document
事件:
document.addEventListener("DOMContentLoaded", window_onLoad})
答案 1 :(得分:0)
好的,在找到你真正打算做的事后我做了一些编码,所以这就是我提出的:
function window_onLoad(){
var ang;
var i;
imgMid.style.left = document.body.clientWidth / 2;
imgMid.style.top = document.body.clientHeight / 2;
ang = 6.2 / 8;
for(var i = 1 ; i < 9 ; i++)
Position('div' + i, ang * i);
}
function getInt(value){
return parseInt(value.replace('px', ''), 10);
}
function Position(id, a){
var objO = document.getElementById(id);
var imgMid = document.getElementById('imgMid');
objO.style.left = getInt(imgMid.style.left) + Math.sin(a) * 200 + 'px';
objO.style.top = getInt(imgMid.style.top) - Math.cos(a) * 200 + 'px';
}
还有一件重要的事情:如果您希望它们居中,请将所有内容放在div
中!