网页动画效果

我想用网页直接做一个动画效果，不使用其他任何的工具，直接用记事本，然后用html，css和javascript之间的关系制作一个ppt放映时的动画效果，该效果是关于介绍沈阳师范大学软件学院学生会文艺部的。因为包含有javascript的脚本，所以有很多浏览器不支持，所以最好使用IE浏览器观看。

具体的可以下载我的源码进行查看：http://download.csdn.net/detail/a1217158716/9828130

一、重要实现的代码和截图

1. 背景的雪花飘落效果

重要的代码如下：

（1）该代码是用于生成多个雪花的。

    document.write('<div style="position:absolute;top:0px;left:0px;z-index:1">');

    document.write('<div style="position:relative;z-index:1">');

    for (i = 0; i < N; i++)

    {

               document.write('<divid="si”style="position:absolute;z-index:1;top:0;left:0;width:'

         +M[i]+';height:'+M[i]+';font-size:'+M[i]+'">

         <font color=white size=3face="Wingdings">T</font></div>')

    }

    document.write('</div></div>');

 

（2）获得浏览器的长度和宽度。

     varH=(document.layers)?window.innerHeight:window.document.body.clientHeight;

     var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;

 

（3）生成雪花随机在屏幕上飘动的坐标。

    X[i]=Math.round(Math.random()*W);

    M[i]=Math.round(Math.random()*1+7);

    S[i]=Math.round(Math.random()*5+2);

 

（4）让雪花按一定时间改变其坐标位置，实现雪花飘动的效果。

    setTimeout('snow()',40);

（5）效果图如下：

2.开始的倒计时的效果

重要的代码如下：

（1）生成一个圆，其中有数字的效果

      <div id="t0" style=" width:200px; height:200px;background-color:gray; border-radius:250px;position:fixed;left:500px;top:150px">

       <span id="t1" style="font-size:100px;height:200px;line-height:200px; display:block; color:#FFF;text-align:center">10</span></div>

（2）倒计时的效果，圆中的数字按照一定的时间改变即可实现倒计时的效果

     id=setInterval("test1()",1000);                  //1秒执行函数

     document.getElementById("t1").innerText=m;     //改变圆中的数字

 （3）效果图如下：

3.四朵花拉开一个矩形框的效果（该效果主要是通过改变矩形框的大小和其坐标来实现的。）

重要的代码如下：

document.getElementById("t0").style.width=m;     //改变矩形的宽度

document.getElementById("t0").style.height=m;     //改变矩形的高度  

document.getElementById("t0").style.left=500+150-shen;    //改变矩形的横坐标

document.getElementById("t0").style.top=150+150-shen;    //改变矩形的纵坐标

效果图如下：

4.实现一个大方块边缘有小方块的效果（可以改变边缘图片的显示类型即可出现此效果）

重要的代码如下：

document.getElementById("tt1").style.display="block";     //设置图片可见

document.getElementById("t2").style.display="none";      //设置图片不可见

效果图如下：

5.实现移动效果（该变图片的宽度和小方块的坐标即可实现）

重要的代码如下：

document.getElementById("fuwu").style.opacity=0.07*shen12;    //使用滤镜实现透明效果

document.getElementById("fuwu1").style.width=shen12*7;     //改变图片的宽度

document.getElementById("fuwu").style.left=640-shen12*7/2;   //改变图片的横坐标

document.getElementById("fuwu").style.top=280-shen12*7/2;   //改变图片的纵坐标

效果图如下：

6.实现字体的进入效果（通过该变字体的大小和其纵坐标姐实现）

重要的代码如下：

document.getElementById("object"+shen17).style.top=200+(shen16)*2;  //改变字体的纵坐标

document.getElementById("object"+shen17).style.left=535+(shen16)*2;  //改变字体的横坐标

document.getElementById("object"+shen17).style.fontSize=200-(shen16)*6;//改变字体的大小

效果图如下：

7.实现文字绕中心旋转（用数学的三角函数实现）

重要的代码如下：

objectX="object"+jt

eval(dS + objectX +sD + v + (Yt +Math.cos((20*Math.sin(inct/20))+jt*70)*yt*(Math.sin(10+inct/10)+0.2)*Math.cos((inct+ jt*25)/10)));     //纵坐标的随机改变算法

 

eval(dS + objectX + sD + ht + (Xt +Math.sin((20*Math.sin(inct/20))+jt*70)*xt*(Math.sin(10+inct/10)+0.2)*Math.cos((inct+ jt*25)/10)));     //横坐标改变算法

效果图如下：

8.实现文字向中心移动的效果（通过三角函数来定位器坐标）

重要的代码如下：

cosDeg = Math.cos(angle * Math.PI /180);    //随机获得坐标值

sinDeg = Math.sin(angle * Math.PI /180);    //随机获得坐标值

target.style.top = (orginH -target.offsetHeight) / 2 + 'px';   //设置字体的纵坐标

target.style.left = (orginW -target.offsetWidth) / 2 + 'px';    //设置字体的横坐标

效果图如下：