javascript雨效果
[英]javascript rain effect
問題描述
我是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>
5 個解決方案
解決方案1
3 2012-12-05 10:57:19
另一個僅限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)
}
解決方案2
1 已采納 2012-12-05 10:25:32
僅限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>
解決方案3
0 2012-12-05 10:16:12
您可以使用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>
解決方案4
0 2012-12-05 10:39:16
試試這個， 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用於動畫。記住你給出的分數越多，下雨就越平滑。
解決方案5
0 2016-08-25 18:53:12
html 5 canvas javascript rain動畫（如何高效，輕松地實現！）
[英]html 5 canvas javascript rain animation(how to implement efficiently and easily!)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.