图片平面旋转的代码如何弄-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20698 次

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

------解决方案--------------------
旋转？

http://js.aiyiweb.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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>