JS实现固定在网页右上角3D风格旋转文字

　　始终显示在网页右上角的文字特效，而且还可以围绕成3D风格的旋转，文字自己修改下，是使用较原生的JS代码来实现，无jquery和其它插件，代码简单可参考性强。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS实现固定在网页右上角3D风格旋转文字丨石家庄花卉绿植租摆|河北叉车</title>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<br>滚动页面试试~<br><hr>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
<SCRIPT language="JavaScript"> 
textstr="欢迎光临  ";
TColor="#AA92C7";
TFont="楷书";
textstr=textstr.split("");
n=textstr.length;
mass=360/n;
cy=cx=sb=0;
yb=50;
xb=60;
sa=0.1;
pa=new Array();
pb=new Array();
for (i=0; i < n; i++) document.write('<div id="logo" style="position:absolute;top:0;left:0;'+'height:30;width:30;font-family:'+TFont+';text-align:center;color:'+TColor+'">'+textstr[i]+'</div>');
function sport(){
  cy=document.body.scrollTop+60;
  cx=document.body.scrollLeft+window.document.body.clientWidth-100;
  for (i=0; i < n; i++){
     logo[i].style.top =cy+yb*Math.sin(sb+i*mass*Math.PI/180);
     logo[i].style.left=cx+xb*Math.cos(sb+i*mass*Math.PI/180);
     pb[i]=logo[i].style.pixelTop-cy;
     pa[i]=pb[i]-pb[i]*2;
     if (pa[i] < 1){
        pa[i]=0;
        logo[i].style.visibility='hidden';
     }
     else logo[i].style.visibility='visible';
     logo[i].style.fontSize=pa[i]/1.7;
  }
  sb-=sa;
  setTimeout('sport()',100);
}
sport();
</SCRIPT>
</p>
</body>
</html>

 

posted @ 2015-04-16 17:16  滇时尚  阅读(504)  评论(0)  编辑  收藏  举报