js做下雨的页面特效

1.如何用html或者js制作天降很多的滑稽还有代码雨的特效?

<style>

* {

margin:0;

padding:0;

}

body {

background:black;

overflow:hidden;

}

.container {

width:20px;

height:60px;

position:absolute;

}

.nav {

height:20px;

width:20px;

display:block;

margin-top:12px;

border-radius:10px;

background:#33ccff;

opacity:0.8;

background: url(1.jpg) no-repeat center;

background-size: auto 100%;

}

</style>

<script>

$(function() {

var w = window.screen.width;

var h = window.screen.height;

var count = 0;

var drop = function() {

this.v = Math.random() * 1 + 0.5;

this.left = Math.random() * w;

}

drop.prototype = {

constructor: drop,

create: function() {

count++;

var $drop = $('<div class="container"><span class="nav"></span></div>');

$drop.appendTo('body');

},

addCss: function() {

$('.container:last').css({

left: this.left + 'px'

})

},

dropEvent: function() {

var time = Math.floor(h / this.v);//下降速度

$('.container:last').animate({

top: h + 'px',

opacity: '1'

}, time)

}

}

function updata() {

if(count > 200) {

for(var i = 0; i < 100; i++) {

$('div:first').remove();

}

count = 0;

}

}

setInterval(function() {

var Drop = new drop();

Drop.create();

Drop.addCss();

Drop.dropEvent();

updata();

}, 50)

})

</script>

2.大家做下一个下雨JavaScript脚本

将以下脚本放在〈Body〉〈/Body〉中间即可:");document。

write(",");}else{document。write("");document。

write(",");}}elseif(ie4up){if(i==0){document。 write("");document。

write(",");}else{document。write("");document。

write("'");//设定雨点的字符}}}functioninitRain(){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];}functionmakeRain(){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];}functionupdateRain(){r[i]+=s;x[i]=r[i]*sn+cx[i];y[i]=r[i]*cs+cy[i];}functionraindropNS(){for(i=0;i=(doc_width-20))||(y[i]>=(doc_height-20))){makeRain();doc_width=self。

innerWidth;doc_height=self。innerHeight;}document。

layers["dot"+i]。top=y[i];document。

layers["dot"+i]。left=x[i];}setTimeout("raindropNS()",speed);}functionraindropIE(){for(i=0;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);}if(ns4up){raindropNS();}elseif(ie4up){raindropIE();}//End-->。

3.利用JS给网页添加雪花飘落的效果

1、修改部分如下:

<html>

<head>

<script src=">

2、在该网页目录 下 新添加 四张雪花图片 命名规则(snow0.gif snow1.gif snow2.gif snow3.gif)

js做下雨的页面特效

转载请注明出处JS代码网 » js做下雨的页面特效

资讯

我的世界js制作大师1.0

阅读(45)

本文主要为您介绍我的世界js制作大师1.0,内容包括我的世界js怎么制作,我的世界js咋制作,我的世界做JS。js指javascript,但是严格意义上这种编写mcpe的脚本语言为modpemodpe和javascript区别就是其函数和参数都已

资讯

我的世界外国以太2js

阅读(28)

本文主要为您介绍我的世界外国以太2js,内容包括我的世界天堂之门以太js,我的世界手机版天堂以太js怎么用,mcpe以太2怎么用。我的世界以太2天堂反重力原矿怎么获得?重力原矿有什么作用呢?下面我来为大家带来详细介绍。材料:紫玉矿镐获取方法:反

资讯

js求1到100的和

阅读(34)

本文主要为您介绍js求1到100的和,内容包括js求1到100的和,编写一简单的JavaScript程序,实现1到100的总和,利用javascript函数实现计算1到100所有数字的和并弹出对话框显示结。var num=100;mySum=new sum2();document.write("方法1:1++100="+su

资讯

js代码封装的好处

阅读(40)

本文主要为您介绍js代码封装的好处,内容包括如何实现JS的封装和JS封装的好处,如何实现JS的封装和JS封装的好处,javascript中面向对象的写法比普通函数封装的写法好在哪里?。而且对于JS代码,因为本身就是一出现是一大段,自然如果不封包起来通

资讯

55js6的公差

阅读(39)

本文主要为您介绍55js6的公差,内容包括15g6公差是多少?,55js655.5h11=?,孔18js6的公差等级。φ65n6上偏差是+0.039,下偏差是+0.020,公差是0.019。φ70h7的上偏差是+0.03,下偏差是0,公差是0.03。φ5

资讯

js创建对象的几种方法

阅读(31)

本文主要为您介绍js创建对象的几种方法,内容包括js创建对象有几种方式,javascript中创建对象的几种方式,急js创建对象有几种方式,不懂的请不要瞎答谢谢。._lev=true;<br><br>if(typeof Parent.name;<br>var x =new Parent(),原型方

资讯

用js规则限制text的时间格式

阅读(31)

本文主要为您介绍用js规则限制text的时间格式,内容包括html在text中输入时间js处理时间格式,javascript中日期的格式怎么规定的?,JS时间文本框限制。<script language="javascript"> function checkform() { s_date=documen

资讯

jsio流的读取文件内容

阅读(41)

本文主要为您介绍jsio流的读取文件内容,内容包括js怎么实现io流写入txt文档?,js写一个读取io文件流的函数,怎么设置函数里的返回值调用函数时,js怎么实现io流写入txt文档?。一帮烂厨子 就会瞎扯淡。发没用的代码有么var fso=new ActiveXObj

资讯

js继承的作用域

阅读(32)

本文主要为您介绍js继承的作用域,内容包括javascript作用域,js中继承的几种用法总结,js的继承方式分别适合哪些应用场景。一,js中对象继承js中有三种继承方式1.js原型(prototype)实现继承复制代码 代码如下:<SPAN style="BACKG

资讯

js怎样打开新的标签页

阅读(32)

本文主要为您介绍js怎样打开新的标签页,内容包括js打开新标签页,Javascript中如何打开新的标签页,如何用javascript在一个新IE窗口中打开一个新页.。这里类似于友情链接js代码:<script type=text/JavaScript> function MM_jumpMenu(sel

资讯

js调用c变量的值

阅读(33)

本文主要为您介绍js调用c变量的值,内容包括js调用c#里的变量,JS中使用变量的问题,JS函数给全局变量赋值。首先,需要将数组在客户端定义,然后才能操作, 例如: var d=10; var strMap=<%=mapvalue%&gt;; --

资讯

js中的this对象的api

阅读(32)

本文主要为您介绍js中的this对象的api,内容包括JavaScript里面的API是什么意思?怎么用?,js里面构造函数对象api的区别,关于javascript中的this对象。<script type="text/javascript"> function fun(){ alert("good"); var a

资讯

js的function方法详解

阅读(27)

本文主要为您介绍js的function方法详解,内容包括javascript中Function()的写法,javascript中的function用法,javascript中function方法。因为JS并不支持指针与委托,其实,这就是Javascript所实现的类似C++中的指针,C#中的委托.XXX相当于托委的

资讯

js获得div内的标签

阅读(31)

本文主要为您介绍js获得div内的标签,内容包括怎么获取div标签之间的内容,javascript如何获取div里面的标签,jQuery或者js如何获得div后面的标签或标签内容。可以使用next() 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素

资讯

我的世界js制作大师1.0

阅读(45)

本文主要为您介绍我的世界js制作大师1.0,内容包括我的世界js怎么制作,我的世界js咋制作,我的世界做JS。js指javascript,但是严格意义上这种编写mcpe的脚本语言为modpemodpe和javascript区别就是其函数和参数都已

资讯

我的世界外国以太2js

阅读(28)

本文主要为您介绍我的世界外国以太2js,内容包括我的世界天堂之门以太js,我的世界手机版天堂以太js怎么用,mcpe以太2怎么用。我的世界以太2天堂反重力原矿怎么获得?重力原矿有什么作用呢?下面我来为大家带来详细介绍。材料:紫玉矿镐获取方法:反

资讯

js求1到100的和

阅读(34)

本文主要为您介绍js求1到100的和,内容包括js求1到100的和,编写一简单的JavaScript程序,实现1到100的总和,利用javascript函数实现计算1到100所有数字的和并弹出对话框显示结。var num=100;mySum=new sum2();document.write("方法1:1++100="+su

资讯

js代码封装的好处

阅读(40)

本文主要为您介绍js代码封装的好处,内容包括如何实现JS的封装和JS封装的好处,如何实现JS的封装和JS封装的好处,javascript中面向对象的写法比普通函数封装的写法好在哪里?。而且对于JS代码,因为本身就是一出现是一大段,自然如果不封包起来通

资讯

55js6的公差

阅读(39)

本文主要为您介绍55js6的公差,内容包括15g6公差是多少?,55js655.5h11=?,孔18js6的公差等级。φ65n6上偏差是+0.039,下偏差是+0.020,公差是0.019。φ70h7的上偏差是+0.03,下偏差是0,公差是0.03。φ5

资讯

js创建对象的几种方法

阅读(31)

本文主要为您介绍js创建对象的几种方法,内容包括js创建对象有几种方式,javascript中创建对象的几种方式,急js创建对象有几种方式,不懂的请不要瞎答谢谢。._lev=true;<br><br>if(typeof Parent.name;<br>var x =new Parent(),原型方

资讯

用js规则限制text的时间格式

阅读(31)

本文主要为您介绍用js规则限制text的时间格式,内容包括html在text中输入时间js处理时间格式,javascript中日期的格式怎么规定的?,JS时间文本框限制。<script language="javascript"> function checkform() { s_date=documen

资讯

我的世界附魔台js怎么用

阅读(34)

本文主要为您介绍我的世界附魔台js怎么用,内容包括我的世界pe附魔js和教程,我的世界手机版安装个附魔js后,,怎么用?最好有图,一定采纳搜,我的世界手机版附魔Js的作用是什么?急。附魔台js使用方法: 下载我的世界附魔台js,启动以后点击中间的扳