图片自转
看到经典论坛上有人问这个问题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 编辑 ]
