图片平面旋转的代码如何弄

2012-04-24

图片平面旋转的代码怎么弄四周的图片围着中心点转 ,在网上找了写三维的旋转，有平面旋转的没？[解决办法]旋

图片平面旋转的代码怎么弄
四周的图片围着中心点转 ,在网上找了写三维的旋转，有平面旋转的没？

[解决办法]
旋转？

http://js.alixixi.com/a/2016364263014.shtml

参考下
[解决办法]
http://code.usuishi.com/Web/DemoView.aspx?DemoID=20
[解决办法]
看下这个是你想要的吗?
http://www.codefans.net/jscss/code/2700.shtml
[解决办法]
我这里给你写了个平面的，原理很简单，就是把图设置为position:absolute,然后定时设置图的坐标就行了。
这个做为演示还行，坐为游戏之类的话性能需要优化，比如把坐标先计算好，存到数组里，这样就在定时器里就不需要计算了。
其中图的个数你可以随便增减

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css" >#div1{ position:relative;height:800px; border:1px solid red;}#div1 img{ position:absolute;}</style></head><body ><div id="div1"   > <img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"   /> <img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"   /> <img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"   /> <img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"   /> <img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"   /> <img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"   /></div><script type="text/javascript" >    var centerx = 400;//圆心X    var centery = 300; //圆心Y    var r = 300; //半径    var oimages = document.getElementById("div1").getElementsByTagName("IMG"); //图片集合    var cnt = oimages.length;//图片数    var da = 360/cnt;//图片间隔角度    var a0 = 0; //已旋转角度    var timer;    for (var i = 0; i < cnt; i++) {        oimages[i].onmouseover = stop;        oimages[i].onmouseout = start;    }    function posimgs() {        for (var i = 0; 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";                    }    }    // posimgs();    function start() {        timer = window.setInterval("posimgs();a0++;", 100);    }    function stop() {        window.clearInterval(timer);    }    start();</script></body></html>
[解决办法]
刚才看到楼主私信我能不能让几个围绕一个转，也很简单，把以上代码稍改动一点点就行了。
我假设是其它的图都围绕第一个转，只有我标红的地方改一下
JScript code//以上不变    var da = 360/([color=#FF0000]cnt-1[/color]);//图片间隔角度    var a0 = 0; //已旋转角度    var timer;[color=#FF0000]    oimages[0].style.left = centerx + "px";    oimages[0].style.top = centery + "px";[/color]    for (var i = [color=#FF0000]1[/color]; i < cnt; i++) {                oimages[i].onmouseover = stop;        oimages[i].onmouseout = start;    }    function posimgs() {        for (var i = [color=#FF0000]1[/color]; 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";                    }    }    // posimgs();//其它不变
[解决办法]
显示有问题没有标红，我重发一下
  var da = 360/(cnt-1);
以下两句是新增的，
    oimages[0].style.left = centerx + "px";
    oimages[0].style.top = centery + "px";

以下就是将for(var i=0  
将i=0改成i=1

热点排行

JavaScript

图片平面旋转的代码如何弄