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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。