日期:2014-05-16  浏览次数:20350 次

还是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";


}