网页下雨JS特效

最新推荐文章于 2024-04-25 20:22:26 发布

hubowei

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量5k

点赞数 3

分类专栏： js html 文章标签： html Html HTML javascript JavaScript Javascript javaScript

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

<P>使用JAVASCRIPT功能实现的网页动态下雨效果，可以通过JS函数完美控制雨滴的大小以及下雨的速度，非常不错的一个动画效果。未使用图片--推荐一款网页下雨动态效果背景代码</P>
<HTML>
    <HEAD>
    <TITLE>JavaScript推荐一款网页下雨动态效果背景代码代码特效 www.cqshy.cn</TITLE>
    </HEAD>
    <BODY bgcolor="#fef4d2" >
    <center>
    <script language=JavaScript>
    
    var rainsize = 40;
    
    var speed = 10;
    var x = new Array();
    var y = new Array();
    var r = new Array();
    var cx = new Array();
    var cy = new Array();
    var doc_width = document.body.clientWidth;
    var doc_height = document.body.clientHeight;
    for(i=0; i<rainsize; ++i) {
    initRain();
    if (i == 0) {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
    document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
    document.write(",</font></div>"); }
    else {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
    document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
    document.write(",.</font></div>"); }
    }
    function initRain() {
    a = 6;
    r[i] = 1;
    sn = Math.sin(a);
    cs = Math.cos(a);
    cx[i] = Math.random() * doc_width + 1;
    cy[i] = Math.random() * doc_height + 1;
    x[i] = r[i] * sn + cx[i];
    y[i] = cy[i];
    }
    function raindropIE() {
    for (i = 0; i < rainsize; ++ i) {
    updateRain();
    if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
    makeRain();
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight; }
    document.all["dot"+i].style.pixelTop = y[i];
    document.all["dot"+i].style.pixelLeft = x[i]; }
    setTimeout("raindropIE()", speed);
    }
    function updateRain() {
    r[i] += 10;
    x[i] = r[i] * sn + cx[i];
    y[i] = r[i] * cs + cy[i];
    }
    function makeRain() {
    r[i] = 1;
    cx[i] = Math.random() * doc_width + 1;
    cy[i] = 1;
    x[i] = r[i] * sn + cx[i];
    y[i] = r[i] * cs + cy[i];
    }
    raindropIE();
    </script>
    </BODY>
    </HTML>

本文来自: 网页资源网( www.dyunr.com) 转载复制请保留原出处，谢谢!详细出处参考： http://www.dyunr.com/Code/dm6/451.html

hubowei

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
网页下雨JS特效

使用JAVASCRIPT功能实现的网页动态下雨效果，可以通过JS函数完美控制雨滴的大小以及下雨的速度，非常不错的一个动画效果。未使用图片--推荐一款网页下雨动态效果背景代码 JavaScript推荐一款网页下雨动态效果背景代码代码特效 www.cqshy.cn> var rainsize = 40;
复制链接

扫一扫