• 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>
  • 相关阅读:
    jQuery插件编写步骤详解
    原生JavaScript实现JSON合并(递归深度合并)
    js原型链继承及调用父类方法
    codefind.pl
    如何为属性是disabled的表单绑定js事件
    平假名、片假名转换
    #和##在宏替换中的作用
    Perl实用中文处理步骤(修改版)
    Perl Unicode全攻略
    nio DirectByteBuffer如何回收堆外内存
  • 原文地址:https://www.cnblogs.com/cfhome/p/2750876.html
Copyright © 2020-2023  润新知