- 你说的效果就是操作宽的大小及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="http://www.pcbmk.com/uploads/allimg/081108/20485790.gif"/></span></div>
<script type="text/javascript">var xa=new x2d("a");</script>
</body>
</html>
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
