zoukankan      html  css  js  c++  java
  • Js特效 旋转的文字

    今天分享两个Js特效,主要是里面的数学关系难搞清楚,要自己好好研究研究才行。

    第一个版本:旋转的文字
     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     4 <title>旋转的文字</title>
     5 </head>
     6 <body>
     7 <div id="mydiv" style="400px; height: 100px; position:absolute;left:500;top:30;">
     8 </div>
     9 
    10 <script type="text/javascript">
    11 var messageinfo="欢迎来到晨风世界";
    12 var Balises=""
    13 var Taille=40;                
    14 var Midx=100;                 
    15 var Decal=0.6;                
    16 for (x=messageinfo.length-1;x>=0;x--){
    17   Balises=Balises + '<div id=L' + x + ' style="3;position:absolute;top:10;left:10">' + messageinfo[x] + '</DIV>'
    18 }
    19 var div=document.getElementByIdx_x_x("mydiv");
    20 div.innerHTML=Balises;
    21 window.setInterval("Minfo()",50);                
    22 
    23 var Alpha=5;
    24 
    25 function Minfo(){
    26 Alpha=Alpha-0.05;
    27 for (x=0;x<messageinfo.length;x++){
    28 var Alpha1=Alpha+Decal*x;
    29 var Cosine=Math.cos(Alpha1);
    30 var Ob=document.all("L"+x);
    31 Ob.style.left=Midx+100*Math.sin(Alpha1);
    32 Ob.style.fontSize=Taille+25*Cosine;
    33 Ob.style.color="rgb("+ (160+Cosine*80+50) + ","+ (150+Cosine*80+50) + ",0)";
    34 }
    35 }
    36 </script>
    37 </body>
    38 </html>
    第二个版本,由于有一些函数在chrome浏览器不支持,所以这个版本只能正常运行在IE内核的浏览器里。
    这个效果是摆动的文字,可以用来在页首表示欢迎的导语。
    代码如下:
     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     4 <title>摆尾文字</title>
     5 <style type="text/css">
     6 </style>
     7 </head>
     8 <body>
     9 <div id="mydiv" style="400px; height: 100px; background-color: #000; padding-top: 20px; padding-right: 15px;">
    10 </div>
    11 
    12 <script language=javascript>
    13 var messageinfo="欢迎来到晨风世界";
    14 var Balises=""
    15 var Taille=40;                
    16 var Midx=100;                 
    17 var Decal=0.6;                
    18 for (x=messageinfo.length-1;x>=0;x--){
    19   Balises=Balises + '<DIV Id=L' + x + ' STYLE="3;float:right;">' + messageinfo.charAt(x) + '</DIV>'
    20 }
    21 var div=document.getElementByIdx_x_x("mydiv");
    22 div.innerHTML=Balises;
    23 window.setInterval("Minfo()",70);                
    24 
    25 var Alpha=5;
    26 
    27 function Minfo(){
    28 Alpha=Alpha-0.05;
    29 for (x=0;x<messageinfo.length;x++){
    30 var Alpha1=Alpha+Decal*x;
    31 var Cosine=Math.cos(Alpha1);
    32 var Ob=document.all("L"+x);
    33 Ob.style.left=Midx+100*Math.sin(Alpha1);
    34 Ob.style.fontSize=Taille+25*Cosine;
    35 Ob.style.color="rgb("+ (160+Cosine*80+50) + ","+ (50+Cosine*80+50) + ",0)";
    36 }
    37 }
    38 </script>
    39 </body>
    40 </html>
  • 相关阅读:
    Zabbix5 Frame 嵌套
    Zabbix5 对接 SAML 协议 SSO
    CentOS7 安装 Nexus
    CentOS7 安装 SonarQube
    GitLab 后台修改用户密码
    GitLab 查看版本号
    GitLab Admin Area 500 Error
    Linux 安装 PostgreSQL
    Liger ui grid 参数
    vue.js 是一个怪东西
  • 原文地址:https://www.cnblogs.com/cfhome/p/2750876.html
Copyright © 2011-2022 走看看