特效描述:圆形图片 叠加排列滚动。原生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>