Question

我是javascrip中的新手，我想在一个有雨效果的页面中制作div，我做了一些东西，但我不知道如何让它移动，它在我的div中绘制随机蓝点我希望他们走下去，这是我的代码：

<html>
<head>

<style>
.punct
{
background-color:blue;
position:absolute;
width:2px;
height:6px;
}
</style>

<script type="text/javascript">


var cleft;
var ctop;

var x=document.getElementById ('content');
function strop (cleft,ctop,d)
{
if (x==null) x="<div class='punct' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
else x=x+"<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'>    </div>";
document.getElementById ('content').innerHTML=x;
}

function randomFromInterval(from,to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}

var y=30;
function start ()
{
if (y!=0){
var a;
var b;
cleft=a;
ctop=b;
a=randomFromInterval (20,1000);
b=randomFromInterval (10,50);
strop(a,b,y);
setTimeout (function () {start ()},500);
y--;
}
}


</script>

</head>
<body>
<div id='content' style='border:2px solid black; height:500px; width:1000px;'></div>
<button onclick='start()'>Start </button>
</body>
</html>

Answer 1

另一种仅限javascript的解决方案。这个使得液滴看起来像原始柱子一样缓慢，并在它们到达底部时除去液滴。 http://jsfiddle.net/35h2Q/4/

function strop(cleft, ctop, d) {
    var drop = document.createElement('div');
    drop.className = 'punct';
    drop.style.left = cleft + 'px';
    drop.style.top = ctop + 'px';
    drop.id = d;
    document.getElementById('content').appendChild(drop);
}

function randomFromInterval(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}
var n, interval;

function newDrop() {
    var x = randomFromInterval(20, 480),
        y = randomFromInterval(10, 50);
    strop(x, y, n);
    n--;
    if (n > 0) {
        setTimeout(newDrop, 500);
        // 500ms is the interval between drops appearing
    }
}

function start() {
    n = 30;
    newDrop();
    interval = setInterval(function() {
        var drops = document.getElementsByClassName('punct'),
            newY;
        if (drops.length == 0) {
            clearInterval(interval);
            return;
        }
        for (var i = 0; i < drops.length; i++) {
            newY = drops[i].offsetTop + 2;   
                 // drops move by 2px in each frame
            if (newY > drops[i].parentNode.offsetHeight) {
                drops[i].parentNode.removeChild(drops[i]);
            }
            else {
                drops[i].style.top = newY + 'px';
            }
        }
    }, 30);   // 30ms is the interval between drops moving (frame rate)
}

Answer 2

仅限Javascript解决方案\ o /

        <script type="text/javascript">
var cleft;
var ctop;

var x=document.getElementById ('content');
function strop (cleft,ctop,d)
{
    if (x==null) x="<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
    else x=x+"<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'></div>";

    document.getElementById ('content').innerHTML=x;
}

function randomFromInterval(from,to)
{
    return Math.floor(Math.random()*(to-from+1)+from);
}

var y=130;
var speed = 2;

function start ()
{
    if (y!=0){
        var a;
        var b;
        cleft=a;
        ctop=b;
        a=randomFromInterval (20,1000);
        b=randomFromInterval (10,500);
        strop(a,b,y);
        y--;
    }

    // Move existing droplets
    for (var i=1; i<=130; i++)
    {
        var el = document.getElementById(i.toString());
        if (el !== null)
        {
            var tp = parseInt(el.style.top) + speed + i*.0125;
            if (tp > 500) 
                tp -= 500;
            el.style.top = tp + "px";
        }
    }

    setTimeout (function () {start ()},10);
}

</script>

Answer 3

您可以使用jQuery动画，为div的顶部位置设置动画以使效果稍微有点。

示例代码：

<script>   
        var cleft;
        var ctop;

        var x=document.getElementById ('content');
        function strop (cleft, ctop, d)
        {
            if (x==null) x="<div class='punct' style='top:"+ctop+"px;left:"+cleft+"px'></div>";
            else x=x+"<div class='punct' id='"+d+"' style='top:"+ctop+"px;left:"+cleft+"px'>    </div>";
            document.getElementById ('content').innerHTML=x;        
        }

        function randomFromInterval(from, to)
        {
            return Math.floor(Math.random()*(to-from+1)+from);
        }

        var y=30;
        function start ()
        {
            if (y != 0){
                var a;
                var b;
                cleft=a;
                ctop=b;
                a=randomFromInterval (20,1000);
                b=randomFromInterval (10,50);
                strop(a, b, y);
                $("#"+y).animate({"top":"480px"},1000)
                setTimeout (function () {start ()},1100);
                y--;
            }
        }
</script>

Answer 4

试试这个，http://jsfiddle.net/CBv5K/

<html>
<head>
<style> 
#demo
{
background-color:blue;
width:2px;
height:6px;
position:relative;
animation:rain .5s;
-moz-animation:rain .5s; /* Firefox */
-webkit-animation:rain .5s; /* Safari and Chrome */
-o-animation:rain .5s; /* Opera */
}

@keyframes rain
{
0%   {top:0px;}
10%   {top:50px;}
20%   {top:100px;}
30%   {top:150px;}
40%   {top:200px;}
50%   {top:250px;}
60%   {top:300px;}
70%   {top:350px;}
80%   {top:400px;}
90%   {top:4500px;}
100%   {top:500px;}
}

@-moz-keyframes rain /* Firefox */
{
0%   {top:0px;}
10%   {top:50px;}
20%   {top:100px;}
30%   {top:150px;}
40%   {top:200px;}
50%   {top:250px;}
60%   {top:300px;}
70%   {top:350px;}
80%   {top:400px;}
90%   {top:4500px;}
100%   {top:500px;}
}

@-webkit-keyframes rain /* Safari and Chrome */
{
0%   {top:0px;}
10%   {top:50px;}
20%   {top:100px;}
30%   {top:150px;}
40%   {top:200px;}
50%   {top:250px;}
60%   {top:300px;}
70%   {top:350px;}
80%   {top:400px;}
90%   {top:4500px;}
100%   {top:500px;}
}

@-o-keyframes rain /* Opera */
{
0%   {top:0px;}
10%   {top:50px;}
20%   {top:100px;}
30%   {top:150px;}
40%   {top:200px;}
50%   {top:250px;}
60%   {top:300px;}
70%   {top:350px;}
80%   {top:400px;}
90%   {top:4500px;}
100%   {top:500px;}
}
</style>
</head>
<body>
<div id='demo'></div>
</body>
</html>

我只做过一次降雨。我已经将CSS用于动画。记住你给出的分数越多，下雨就越平滑。

Answer 5

我在这里找到了两个例子，希望他们可以帮到你：
Special Rain and Cloud On Page
Hard Raining on the Page
源代码也可用。您还可以通过网站内的搜索找到更多相关内容。

正如用户评论的那样，我把这些来源放在这里。它们是两个js文件来处理事情。

<script type="text/javascript" src="http://htmlfreecodes.com/codes/rain.js">
</script>

以及

<script src="http://javascriptbestcodes.com/codes/cloudandrain.js"></script>

javascript雨效果

5 个答案: