几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 528 JAVASCRIPT 鼠标
怎么用javascript模拟烟花
来源：互联网
2023-03-16 23:57:45 版权归原作者所有，如有侵权，请联系我们
烟花的燃放，当真是缤纷多彩。
本文介绍一下在网页里面，模拟烟花燃放的效果。
工具/原料
- 电脑
- 浏览器
- notepad
方法/步骤
notepad用来编辑html代码。
烟花在黑夜里燃放，才有看头。所以，用黑色背景来模拟夜色。
!doctype html>
html>
head>
meta charset="utf-8">
title>js Effect of fireworks/title>
/head>
body style="overflow:hidden; background:black;">
/body>
/html>
用一个宽27像素、高270像素的红色长方形来表示烟花；
鼠标在网页某个位置点击一下，烟花就会发射到相应位置：
document.onclick=function (ev)
{
var oEvent=ev||event;
var aDiv=[];
var oDiv=null;
var _oDiv=document.createElement('div');
var i=0;
var x=oEvent.clientX;
var y=oEvent.clientY;
_oDiv.style.position='absolute';
_oDiv.style.background='red';
_oDiv.style.width='27px';
_oDiv.style.height='270px';
_oDiv.style.left=oEvent.clientX 'px';
_oDiv.style.top=document.documentElement.clientHeight 'px';
document.body.appendChild(_oDiv);
var t=setInterval(function (){
if(_oDiv.offsetTop=y)
{
clearInterval(t);
show();
document.body.removeChild(_oDiv);
}
_oDiv.style.top=_oDiv.offsetTop-30 'px';
}, 30);
};
烟花在爆炸的时候，烟花消失，取而代之的是100个重叠在一起的彩色方块：
function show()
{
var oDiv=null;
for(i=0;i100;i )
{
oDiv=document.createElement('div');
oDiv.style.width='18px';
oDiv.style.height='18px';
oDiv.style.background='#' Math.ceil(Math.random()*0xEFFFFF 0x0FFFFF).toString(16);
oDiv.style.position='absolute';
oDiv.style.left=x 'px';
oDiv.style.top=y 'px';
var a=Math.random()*360;
//oDiv.speedX=Math.random()*40-20;
//oDiv.speedY=Math.random()*40-20;
oDiv.speedX=Math.sin(a*180/Math.PI)*20*Math.random();
oDiv.speedY=Math.cos(a*180/Math.PI)*20*Math.random();
document.body.appendChild(oDiv);
aDiv.push(oDiv);
}
}
爆炸，重叠在一起的100个彩色方块随机地向四周抛射散落：
setInterval(doMove, 30);
function doMove()
{
for(i=0;iaDiv.length;i )
{
aDiv[i].style.left=aDiv[i].offsetLeft aDiv[i].speedX 'px';
aDiv[i].style.top=aDiv[i].offsetTop aDiv[i].speedY 'px';
aDiv[i].speedY =1;
if(aDiv[i].offsetLeft0 || aDiv[i].offsetLeft>document.documentElement.clientWidth || aDiv[i].offsetTop0 || aDiv[i].offsetTodocument.documentElement.clientHeight)
{
document.body.removeChild(aDiv[i]);
aDiv.splice(i, 1);
}
}
}
整体代码布局如下图。
注意事项
- 把上述代码保存为html，然后可以用浏览器打开。
- 鼠标点击网页，就可以实现烟花燃放的效果。
- 鼠标不要点的国语激烈，否则电脑会很卡。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPT
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 256 JAVASCRIPT
- 详细阅读