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>
  • 相关阅读:
    Android调用Camera API 拍照导致图片变形
    [转]Android PorterDuff.Mode效果
    Android视频录制
    Android调用Camera API 拍照
    Android调用系统拍照
    android:windowIsTranslucent影响Activity生命周期onStop
    ProgressBar自定义之后图片拉伸的解决办法
    android开源ORM框架OrmLite使用教程
    AutoCompleteTextView源码分析
    Android App安全加固
  • 原文地址:https://www.cnblogs.com/cfhome/p/2750876.html
Copyright © 2011-2022 走看看