网页下雪特效代码可复制(js下雪特效代码)

http://www.itjxue.com  2023-02-25 12:54  来源:未知  点击次数: 

请教网页飘雪的插景,布满整个页面(不是背景)怎么制作

点击编辑窗口左下角的“HTML”选项卡,即出现源代码窗口,将特效代码粘贴进去即可。

这里有代码~

网页飘雪花的代码是什么

在后台添加js特效可实现这样的效果。

js代码为:

script language="JavaScript"

!--

var no = 5; //雪片数目

var speed = 20; //飘动速度。(值越大越慢)

var ns4up = (document.layers) ? 1 : 0; //当前浏览器类型,如果是NS则为1

var ie4up = (document.all) ? 1 : 0; //当前浏览器类型,如果是IE则为1

var s, x, y, sn, cs;

var a, r, cx, cy;

var i, doc_width = 800, doc_height = 600;

x = new Array();

y = new Array();

r = new Array();

cx = new Array();

cy = new Array();

s = 8; //每次下落的高度,越小越平滑,但是也越慢

if (ns4up) { //以NS兼容方式

doc_width = self.innerWidth; //取页面宽度

doc_height = self.innerHeight; //取页面高度

}

else

if (ie4up) { //以IE兼容方式

doc_width = document.body.clientWidth; //取页面宽度

doc_height = document.body.clientHeight; //取页面高度

}

for (i = 0; i no; ++ i) { //根据前面定义的雪片数目写进相应数目的层

initSnow(); //随机初始化层的坐标

if (ns4up) { //如果浏览器是NS

//用layer作为雪片(星号)的容器

document.write("layer name=\"dot"+ i +"\" left=\"1\" ");

document.write("top=\"1\" visibility=\"show\"font color=\"red\"");

document.write("*/font/layer");

}

else

if (ie4up) { //如果浏览器是IE

//用div作为雪片的容器

document.write("div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\"font color=\"red\"");

document.write("*/font/div");

}

}

//初始化雪片,生成随机坐标

function initSnow() {

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 makeSnow() {

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];

}

//雪花下落的计算

function updateSnow() {

r[i] += s;

x[i] = r[i] * sn + cx[i];

y[i] = r[i] * cs + cy[i];

}

//在NS浏览器上处理雪片下落的主程序

function SnowdropNS() {

for (i = 0; i no; ++ i) { //依次处理每片雪花

updateSnow(); //下落

if ((x[i] = 1) || (x[i] = (doc_width - 20)) || (y[i] = (doc_height - 20))) { //如果超出屏幕范围

makeSnow(); //则调整雪片到新位置上

doc_width = self.innerWidth; //更新页面宽度数据

doc_height = self.innerHeight; //更新页面高度数据

}

document.layers["dot"+i].top = y[i]; //改变层的Y坐标,应用新的位置

document.layers["dot"+i].left = x[i]; //改变层的X坐标,应用新的位置

}

setTimeout("SnowdropNS()", speed);

}

//在IE浏览器上处理雪片下落的主程序

function SnowdropIE() {

for (i = 0; i no; ++ i) { //依次处理每片雪花

updateSnow(); //下落

if ((x[i] = 1) || (x[i] = (doc_width - 20)) || (y[i] = (doc_height - 20))) { //如果超出屏幕范围

makeSnow(); //则调整雪片到新位置上

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("SnowdropIE()", speed); //准备下一次下落过程。

}

if (ns4up) { //如果是NS

SnowdropNS(); //调用SnowdropNS使雪片下落

}

else

if (ie4up) { //如果是NS

SnowdropIE(); //调用SnowdropIE使雪片下落

}

--

/script

说明:可以根据自己的需求根据说明进行相应参数的修改

HTML下雪代码

html

head

/head

BODY bgcolor="#000000"

SCRIPT language=JavaScript1.2

var snowsrc="images/xuehua1.gif"

var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer

var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables

var am, stx, sty; // amplitude and step variables

var i, doc_width = 800, doc_height =600;

if (ns4up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

} else if (ie4up) {

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx = new Array();

xp = new Array();

yp = new Array();

am = new Array();

stx = new Array();

sty = new Array();

for (i = 0; i no; ++ i) {

dx[i] = 0; // set coordinate variables

xp[i] = Math.random()*(doc_width-50); // set position variables

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20; // set amplitude variables

stx[i] = 0.02 + Math.random()/10; // set step variables

sty[i] = 0.7 + Math.random(); // set step variables

if (ns4up) { // set layers

if (i == 0) {

document.write("layer name=\"dot"+ i +"\" left=\"50\" top=\"50\" visibility=\"show\"img src='"+snowsrc+"' border=\"0\"/a/layer");

} else {

document.write("layer name=\"dot"+ i +"\" left=\"50\" top=\"50\" visibility=\"show\"img src='"+snowsrc+"' border=\"0\"/layer");

}

} else if (ie4up) {

if (i == 0) {

document.write("div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"img src='"+snowsrc+"' border=\"0\"/a/div");

} else {

document.write("div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"img src='"+snowsrc+"' border=\"0\"/div");

}

}

}

function snowNS() { // Netscape main animation function

for (i = 0; i no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

dx[i] += stx[i];

document.layers["dot"+i].top = yp[i];

document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowNS()", 10);

}

function snowIE() { // IE main animation function

for (i = 0; i no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx[i] += stx[i];

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowIE()", 10);

}

if (ns4up) {

snowNS();

} else if (ie4up) {

snowIE();

}

/SCRIPT

/body

/html

记得给我加分啊

var snowsrc="images/xuehua1.gif"这句是你雪花图片的地址

求网页飘雪花源代码

把下列代码加到网页的Body/Body标签之间

html

head

title:::飘雪花效果:::网页特效代码:::失落网家园;/title

/head

BODY bgcolor="#000000"

SCRIPT language=JavaScript1.2

var snowsrc="img/snow.gif"

var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer

var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables

var am, stx, sty; // amplitude and step variables

var i, doc_width = 800, doc_height =600;

if (ns4up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

} else if (ie4up) {

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx = new Array();

xp = new Array();

yp = new Array();

am = new Array();

stx = new Array();

sty = new Array();

for (i = 0; i no; ++ i) {

dx[i] = 0; // set coordinate variables

xp[i] = Math.random()*(doc_width-50); // set position variables

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20; // set amplitude variables

stx[i] = 0.02 + Math.random()/10; // set step variables

sty[i] = 0.7 + Math.random(); // set step variables

if (ns4up) { // set layers

if (i == 0) {

document.write("layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"a href=\"\"img src='"+snowsrc+"' border=\"0\"/a/layer");

} else {

document.write("layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"img src='"+snowsrc+"' border=\"0\"/layer");

}

} else if (ie4up) {

if (i == 0) {

document.write("div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"a href=\"\"img src='"+snowsrc+"' border=\"0\"/a/div");

} else {

document.write("div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"img src='"+snowsrc+"' border=\"0\"/div");

}

}

}

function snowNS() { // Netscape main animation function

for (i = 0; i no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

dx[i] += stx[i];

document.layers["dot"+i].top = yp[i];

document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowNS()", 10);

}

function snowIE() { // IE main animation function

for (i = 0; i no; ++ i) { // iterate for every dot

yp[i] += sty[i];

if (yp[i] doc_height-50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx[i] += stx[i];

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowIE()", 10);

}

if (ns4up) {

snowNS();

} else if (ie4up) {

snowIE();

}

/SCRIPT

table border="0" width="100%" cellpadding="0"

tr

td width="100%"font color="#ffffff" size="2"b飘雪花效果/b注意保存这个图片(img border="1" src="img/snow.gif" width="16" height="17")/font/td

/tr

tr

td width="100%"

/table

script language="JavaScript" type="text/javascript" src="js.js"/scripttr/body

/html

(责任编辑:IT教学网)

更多

推荐linux服务器文章