用js实现下雨效果

最新推荐文章于 2024-07-31 13:57:58 发布

原创

最新推荐文章于 2024-07-31 13:57:58 发布 · 2.9k 阅读

收录于

这段HTML和JavaScript代码展示了如何在网页上实现一个简单的下雨动画特效。通过调整变量，可以改变雨滴的数量和下落速度。代码创建了多个点来表示雨滴，并通过更新它们的位置模拟雨滴下落的过程。适合用于网页背景，但需要注意设置合理的参数以避免性能问题。

<HTML>
    <HEAD>
    <TITLE>JavaScript动态雨景站长学院代码特效 </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 {