还是js图片平面旋转的问题
var centerx = 400; //圆心X
var centery = 400; //圆心Y
var r =360; //半径
var oimages = document.getElementById("div1").getElementsByTagName("div"); //图片集合
var cnt = oimages.length; //图片数
var da = 360 / (cnt - 1); //图片间隔角度
var a0 = 0; //已旋转角度
var timer;
oimages[0].style.left = centerx + "px";
oimages[0].style.top = centery + "px";
for (var i = 1; i < cnt; i++) {
oimages[i].onmouseover = stop;
oimages[i].onmouseout = start;
}
function posimgs() {
for (var i = 1; i < cnt; i++) {
oimages[i].style.left = centerx + r * Math.cos((da * i + a0) / 180 * Math.PI) + "px";
oimages[i].style.top = centery + r * Math.sin((da * i + a0) / 180 * Math.PI) + "px";
}}
function start() {
timer = window.setInterval("posimgs();a0++;", 100);
}
上面代码实现若干图片围绕中心点旋转,中心点也可以放图片,但我中心点要放的图片有点大,
造成旋转时半径大小不一,左边空的多,右边空的少甚至重叠,怎么解决?
------解决方案--------------------
这样,定位的时候以内容中心点为基坐标就可以了,
images[0].style.left = centerx - images[0].offsetWidth / 2 + "px";
oimages[0].style.top = centery - images[0].offsetHeight / 2 + "px";
function posimgs() {
for (var i = 1; i < cnt; i++) {
oimages[i].style.left = centerx - images[i].offsetWidth / 2 + r * Math.cos((da * i + a0) / 180 * Math.PI) + "px";
oimages[i].style.top = centery - images[i].offsetHeight / 2 + r * Math.sin((da * i + a0) / 180 * Math.PI) + "px";
}
}