图片自转 - 编程论坛

看到经典论坛上有人问这个问题http://bbs.

看了下，一般，感觉直接在操作宽度，没翻转，没缩放,用JS模仿了一下

程序代码：

<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="http://www. type="text/javascript">var xa=new x2d("a");</script>

</body>
</html>

[ 本帖最后由虾B写于 2010-5-3 19:40 编辑 ]