图片平面旋转的代码怎么弄

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

解决方案 »

  1.   

    旋转？http://js.alixixi.com/a/2016364263014.shtml参考下
      

  2.   

    http://code.usuishi.com/Web/DemoView.aspx?DemoID=20
      

  3.   

    看下这个是你想要的吗?
    http://www.codefans.net/jscss/code/2700.shtml
      

  4.   

    我这里给你写了个平面的，原理很简单，就是把图设置为position:absolute,然后定时设置图的坐标就行了。
    这个做为演示还行，坐为游戏之类的话性能需要优化，比如把坐标先计算好，存到数组里，这样就在定时器里就不需要计算了。
    其中图的个数你可以随便增减<!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>
      

  5.   

    刚才看到楼主私信我能不能让几个围绕一个转，也很简单，把以上代码稍改动一点点就行了。
    我假设是其它的图都围绕第一个转，只有我标红的地方改一下//以上不变
        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";            
            }
        }
        // posimgs();
    //其它不变
      

  6.   

    显示有问题没有标红，我重发一下
     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