码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-16 19:24:51      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

  始终显示在网页右上角的文字特效,而且还可以围绕成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>

 

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

标签:

原文地址:http://www.cnblogs.com/zhaozzm/p/4432670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!