特效描述：圆形图片 叠加排列滚动。原生js 3D圆形图片叠加排列滚动特效代码下载
代码结构
1. HTML代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
<!--
window.onload=function(){
for(i=1;i<9;i++){
d=document.createElement('img');
d.id="d"+i;
d.src="r"+i+".jpg";
d.style.cssText="position:absolute;";
document.body.appendChild(d);
}
rr();
}
var cl;
function rr(o,rl){
if(typeof(o)=="undefined"){
o=document.getElementById('d1');
n=45;
}else{
n-=(350-o.offsetLeft)/20;
}
for(j=1;j<9;j++){
document.getElementById('d'+j).style.left=Math.cos(Math.PI/180*(n+j*45))*300+450-(Math.sin(Math.PI/180*(n+j*45))*50+150)/2+"px";
document.getElementById('d'+j).style.top=200-(Math.sin(Math.PI/180*(n+j*45))*50+150)/2+"px";
document.getElementById('d'+j).style.width=Math.sin(Math.PI/180*(n+j*45))*50+250+"px";
document.getElementById('d'+j).style.height=Math.sin(Math.PI/180*(n+j*45))*50+250+"px";
document.getElementById('d'+j).style.zIndex=Math.round(Math.sin(Math.PI/180*(n+j*45))*10);
if(document.getElementById('d'+j).offsetLeft>400){
document.getElementById('d'+j).style.cursor="pointer";
document.getElementById('d'+j).onclick=function(){
th=this;
cl=setInterval("rr(th,'r')",30);}
}else if(document.getElementById('d'+j).offsetLeft<300){
document.getElementById('d'+j).style.cursor="pointer";
document.getElementById('d'+j).onclick=function(){
th=this;
cl=setInterval("rr(th,'l')",30);}
}else{
document.getElementById('d'+j).style.cursor="default";
document.getElementById('d'+j).onclick=function(){return false;}
}
}
if(rl=="r")
if(o.offsetLeft<=350)clearInterval(cl);
if(rl=="l")
if(o.offsetLeft>=350)clearInterval(cl);
}
//-->
</script>
</head>
<body>
</body>
</html>
