分享
 
 
 

网页上的“*”动感散发

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

有什么问题请到<a href='/bbs/forums.php?fid=21'>论坛</a>中发表<br>

<!-- http://www.webjx.com -->

<!-- bbs http://bbs.webjx.com -->

<!--要完成此效果需要两个步骤

第一步:把如下代码加入到<head>区域中-->

<SCRIPT LANGUAGE="JavaScript1.2">

var intervals=2000

var sparksOn = true;

var speed = 40;

var power = 3;

var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0

var ns=(document.layers);

var ie=(document.all);

var ns6=(document.getElementById&&!document.all);

var sparksAflyin = false;

var allDivs = new Array(10);

var totalSparks = 0;

function initAll(){

if(!ns && !ie &&!ns6){

sparksOn = false;

return;

}

setInterval("firework()",intervals)

if (ns)

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);

for(dNum=0; dNum<7; ++dNum){

if(ie)

allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');

else if (ns6)

allDivs[dNum]=document.getElementById('sDiv'+dNum).style;

else

allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');

}

}

function firework(){

//below code detects the browser dimenions

if (ie){

documentWidth=document.body.clientWidth

documentHeight=document.body.clientHeight

leftcorner=document.body.scrollLeft

topcorner=document.body.scrollTop

}

else if (ns||ns6){

documentWidth=window.innerWidth

documentHeight=window.innerHeight

leftcorner=pageXOffset

topcorner=pageYOffset

}

//below code randomly generates a set of coordinates that fall within the dimension

randomx=leftcorner+Math.floor(Math.random()*documentWidth)

randomy=topcorner+Math.floor(Math.random()*documentHeight)

if(sparksOn){

if(!sparksAflyin){

sparksAflyin=true;

totalSparks=0;

for(var spark=0;spark<=6;spark++){

dx=Math.round(Math.random()*50);

dy=Math.round(Math.random()*50);

moveTo(spark,randomx,randomy,dx,dy);

}

}

}

}

function moveTo(i,tempx,tempy,dx,dy){

if(ie){

if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))

tempy=document.body.offsetHeight+document.body.scrollTop-80;

if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))

tempx=document.body.offsetWidth+document.body.scrollLeft-80;

}

else if(ns6){

if(tempy+80>(window.innerHeight+pageYOffset))

tempy=window.innerHeight+pageYOffset-80;

if(tempx+80>(window.innerWidth+pageXOffset))

tempx=window.innerWidth+pageXOffset-80;

}

if(tempx>-50&&tempy>-50){

tempx+=dx;tempy+=dy;

allDivs[i].left=tempx;

allDivs[i].top=tempy;

dx-=power;dy-=power;

setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)

}

else

++totalSparks

if(totalSparks==7){

sparksAflyin=false;

totalSparks=0;

}

}

window.onload=initAll

</script>

<style>

#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;}

#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red; z-index:10;}

#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue; z-index:11;}

#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange; z-index:12;}

#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow; z-index:13;}

#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen; z-index:14;}

#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver; z-index:15;}

</style>

<!--第二步:把如下代码加入到<body>区域中-->

<div id="sDiv0">*</div>

<div id="sDiv1">*</div>

<div id="sDiv2">*</div>

<div id="sDiv3">*</div>

<div id="sDiv4">*</div>

<div id="sDiv5">*</div>

<div id="sDiv6">*</div>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有