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