Javascript教程_这种旋转LOGO如何作_Javascript教程_H5之家

你说的效果就是操作宽的大小及X坐标，不仔细看还真以为是在转。
<html>
<head>
    <title>图片旋转</title>
    <style type="text/css">
        *{padding:0px;margin:0px}
        img{width:120px;height:120px;}
        #a{position:relative;}
        #a div{width:1px;overflow:hidden;position:absolute;}
        .a{margin:50px auto;width:800px;}
        body{padding:0px 100px;}
    </style>
    <script type="text/javascript">
function x2d(id){
    this.obj=document.getElementById(id);
    this.w=this.obj.offsetWidth;
    this.h=this.obj.offsetHeight;
    var txt="";
    var html=this.obj.innerHTML;
    this.ar=new Array();
    for(var i=0;i<this.w;i++){
        txt+="<div>"+html+"</div>";
        var xx=i-this.w/2;
        var yy=Math.acos(xx/Math.abs(xx))*180/Math.PI;

        this.ar[i]=[Math.abs(xx),yy];
    }
    this.obj.innerHTML=txt;
    this.txt=this.obj.getElementsByTagName("div");
    for(var i=0;i<this.w;i++){this.txt[i].scrollLeft=i;}
this.xy();
}
x2d.prototype.xy=function(){
    for(var i=0;i<this.w;i++){
        if(this.ar[i][0]!==0){
            this.txt[i].style.left=(this.ar[i][0]*Math.cos(this.ar[i][1]*Math.PI/180)
+this.w/2)+"px";
            var k=Math.sin(this.ar[i][1]*Math.PI/180);
            this.txt[i].style.zIndex=k;
            k=(300-this.ar[i][0]*k)/300*this.h;
            this.txt[i].style.height=k+"px";
            this.txt[i].getElementsByTagName("img")[0].style.height=k+"px";
            this.txt[i].style.top=(this.h-k)/2+"px";
        }else{this.txt[i].style.left=(this.w/2)+"px";}
        this.ar[i][1]+=4;
    }
var objthis=this;
setTimeout(function(){objthis.xy()},50);
}
    </script>
</head>
<body>
<div class="a"><span id="a"><img
src=""/></span></div>
<script type="text/javascript">var xa=new x2d("a");</script>
</body>
</html>