您的当前位置:首页JQuery和html+css实现鼠标点击放烟花
广告

JQuery和html+css实现鼠标点击放烟花

2023-12-01 来源:旭新科技网

 1 <!DOCTYPE html> 2 <html> 3 <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>HTML5烟花燃放特效代码</title> 5 6 <style> 7 html,body{height:100%;margin:0;padding:0} 8 ul,li{text-indent:0;text-decoration:none;margin:0;padding:0} 9 img{border:0} 10 body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif} 11 canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20} 12 *{ 13 margin: 0px; 14 padding: 0px; 15 } 16 #bg_Img{ 17 width: 1920px; 18 height: 1500px; 19 border: 1px solid transparent; 20 background: url("start.gif") repeat; 21 text-align: center; 22 } 23 ul{ 24 width: 5555px; 25 height: 200px; 26 } 27 li{ 28 font: 120px/190px "楷体"; 29 color: white; 30 text-shadow: 5px 10px 10px 10px; 31 list-style: none; 32 float: left; 33 display: none; 34 } 35 #text_bd{ 36 width: 600px; 37 height: 200px; 38 border: 5px solid transparent; 39 margin-left: 200px; 40 } 41 #mouse_click{ 42 margin: 0px auto; 43 text-align: center; 44 color: white; 45 } 46 </style> 47 48 </head> 49 <body> 50 <div id="bg_Img"> 51 <div id="text_bd"> 52 <ul> 53 <li>O(∩_∩)O~~</li> 54 <li>同</li> 55 <li>学</li> 56 <li>们</li> 57 <li>节</li> 58 <li>日</li> 59 <li>快</li> 60 <li>乐</li> 61 <li>~~</li> 62 </ul> 63 </div> 64 <div id="mouse_click">鼠标点击释放烟花效果</div> 65 </div> 66 <script type="text/javascript" src="jquery-3.1.1.js"></script> 67 <script type="text/javascript"> 68 var aLi=document.querySelectorAll("li"); 69 setInterval(a,1000); 70 setInterval(b,2000); 71 setInterval(c,3000); 72 setInterval(d,4000); 73 setInterval(e,5000); 74 setInterval(f,6000); 75 setInterval(g,7000); 76 setInterval(h,8000); 77 function a() { 78 aLi[0].style.display = "block" 79 } 80 function b() { 81 aLi[1].style.display = "block" 82 } 83 function c() { 84 aLi[2].style.display = "block" 85 } 86 function d() { 87 aLi[3].style.display = "block" 88 } 89 function e() { 90 aLi[4].style.display = "block" 91 } 92 function f() { 93 aLi[5].style.display = "block" 94 } 95 function g() { 96 aLi[6].style.display = "block" 97 } 98 function h() { 99 aLi[7].style.display = "block"100 }101 $(function(){102 var Fireworks = function(){103 var self = this;104 var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}105 var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};106 window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();107 108 self.init = function(){109 self.canvas = document.createElement('canvas');110 self.canvas.width = self.cw = $(window).innerWidth();111 self.canvas.height = self.ch = $(window).innerHeight();112 self.particles = [];113 self.partCount = 150;114 self.fireworks = [];115 self.mx = self.cw/2;116 self.my = self.ch/2;117 self.currentHue = 30;118 self.partSpeed = 5;119 self.partSpeedVariance = 10;120 self.partWind = 50;121 self.partFriction = 5;122 self.partGravity = 1;123 self.hueMin = 0;124 self.hueMax = 360;125 self.fworkSpeed = 4;126 self.fworkAccel = 10;127 self.hueVariance = 30;128 self.flickerDensity = 25;129 self.showShockwave = true;130 self.showTarget = false;131 self.clearAlpha = 25;132 133 $(document.body).append(self.canvas);134 self.ctx = self.canvas.getContext('2d');135 self.ctx.lineCap = 'round';136 self.ctx.lineJoin = 'round';137 self.lineWidth = 1;138 self.bindEvents();139 self.canvasLoop();140 141 self.canvas.onselectstart = function() {142 return false;143 };144 };145 146 self.createParticles = function(x,y, hue){147 var countdown = self.partCount;148 while(countdown--){149 var newParticle = {150 x: x,151 y: y,152 coordLast: [153 {x: x, y: y},154 {x: x, y: y},155 {x: x, y: y}156 ],157 angle: rand(0, 360),158 speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),159 friction: 1 - self.partFriction/100,160 gravity: self.partGravity/2,161 hue: rand(hue-self.hueVariance, hue+self.hueVariance),162 brightness: rand(50, 80),163 alpha: rand(40,100)/100,164 decay: rand(10, 50)/1000,165 wind: (rand(0, self.partWind) - (self.partWind/2))/25,166 lineWidth: self.lineWidth167 };168 self.particles.push(newParticle);169 }170 };171 172 173 self.updateParticles = function(){174 var i = self.particles.length;175 while(i--){176 var p = self.particles[i];177 var radians = p.angle * Math.PI / 180;178 var vx = Math.cos(radians) * p.speed;179 var vy = Math.sin(radians) * p.speed;180 p.speed *= p.friction;181 182 p.coordLast[2].x = p.coordLast[1].x;183 p.coordLast[2].y = p.coordLast[1].y;184 p.coordLast[1].x = p.coordLast[0].x;185 p.coordLast[1].y = p.coordLast[0].y;186 p.coordLast[0].x = p.x;187 p.coordLast[0].y = p.y;188 189 p.x += vx;190 p.y += vy;191 p.y += p.gravity;192 193 p.angle += p.wind;194 p.alpha -= p.decay;195 196 if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05){197 self.particles.splice(i, 1);198 }199 };200 };201 202 self.drawParticles = function(){203 var i = self.particles.length;204 while(i--){205 var p = self.particles[i];206 207 var coordRand = (rand(1,3)-1);208 self.ctx.beginPath();209 self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));210 self.ctx.lineTo(Math.round(p.x), Math.round(p.y));211 self.ctx.closePath();212 self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';213 self.ctx.stroke();214 215 if(self.flickerDensity > 0){216 var inverseDensity = 50 - self.flickerDensity;217 if(rand(0, inverseDensity) === inverseDensity){218 self.ctx.beginPath();219 self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)220 self.ctx.closePath();221 var randAlpha = rand(50,100)/100;222 self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';223 self.ctx.fill();224 }225 }226 };227 };228 229 230 self.createFireworks = function(startX, startY, targetX, targetY){231 var newFirework = {232 x: startX,233 y: startY,234 startX: startX,235 startY: startY,236 hitX: false,237 hitY: false,238 coordLast: [239 {x: startX, y: startY},240 {x: startX, y: startY},241 {x: startX, y: startY}242 ],243 targetX: targetX,244 targetY: targetY,245 speed: self.fworkSpeed,246 angle: Math.atan2(targetY - startY, targetX - startX),247 shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),248 acceleration: self.fworkAccel/100,249 hue: self.currentHue,250 brightness: rand(50, 80),251 alpha: rand(50,100)/100,252 lineWidth: self.lineWidth253 };254 self.fireworks.push(newFirework);255 256 };257 258 259 self.updateFireworks = function(){260 var i = self.fireworks.length;261 262 while(i--){263 var f = self.fireworks[i];264 self.ctx.lineWidth = f.lineWidth;265 266 vx = Math.cos(f.angle) * f.speed,267 vy = Math.sin(f.angle) * f.speed;268 f.speed *= 1 + f.acceleration;269 f.coordLast[2].x = f.coordLast[1].x;270 f.coordLast[2].y = f.coordLast[1].y;271 f.coordLast[1].x = f.coordLast[0].x;272 f.coordLast[1].y = f.coordLast[0].y;273 f.coordLast[0].x = f.x;274 f.coordLast[0].y = f.y;275 276 if(f.startX >= f.targetX){277 if(f.x + vx <= f.targetX){278 f.x = f.targetX;279 f.hitX = true;280 } else {281 f.x += vx;282 }283 } else {284 if(f.x + vx >= f.targetX){285 f.x = f.targetX;286 f.hitX = true;287 } else {288 f.x += vx;289 }290 }291 292 if(f.startY >= f.targetY){293 if(f.y + vy <= f.targetY){294 f.y = f.targetY;295 f.hitY = true;296 } else {297 f.y += vy;298 }299 } else {300 if(f.y + vy >= f.targetY){301 f.y = f.targetY;302 f.hitY = true;303 } else {304 f.y += vy;305 }306 }307 308 if(f.hitX && f.hitY){309 self.createParticles(f.targetX, f.targetY, f.hue);310 self.fireworks.splice(i, 1);311 312 }313 };314 };315 316 self.drawFireworks = function(){317 var i = self.fireworks.length;318 self.ctx.globalCompositeOperation = 'lighter';319 while(i--){320 var f = self.fireworks[i];321 self.ctx.lineWidth = f.lineWidth;322 323 var coordRand = (rand(1,3)-1);324 self.ctx.beginPath();325 self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));326 self.ctx.lineTo(Math.round(f.x), Math.round(f.y));327 self.ctx.closePath();328 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';329 self.ctx.stroke();330 331 if(self.showTarget){332 self.ctx.save();333 self.ctx.beginPath();334 self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)335 self.ctx.closePath();336 self.ctx.lineWidth = 1;337 self.ctx.stroke();338 self.ctx.restore();339 }340 341 if(self.showShockwave){342 self.ctx.save();343 self.ctx.translate(Math.round(f.x), Math.round(f.y));344 self.ctx.rotate(f.shockwaveAngle);345 self.ctx.beginPath();346 self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);347 self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';348 self.ctx.lineWidth = f.lineWidth;349 self.ctx.stroke();350 self.ctx.restore();351 }352 };353 };354 355 self.bindEvents = function(){356 $(window).on('resize', function(){357 clearTimeout(self.timeout);358 self.timeout = setTimeout(function() {359 self.canvas.width = self.cw = $(window).innerWidth();360 self.canvas.height = self.ch = $(window).innerHeight();361 self.ctx.lineCap = 'round';362 self.ctx.lineJoin = 'round';363 }, 100);364 });365 366 $(self.canvas).on('mousedown', function(e){367 self.mx = e.pageX - self.canvas.offsetLeft;368 self.my = e.pageY - self.canvas.offsetTop;369 self.currentHue = rand(self.hueMin, self.hueMax);370 self.createFireworks(self.cw/2, self.ch, self.mx, self.my);371 372 $(self.canvas).on('mousemove.fireworks', function(e){373 self.mx = e.pageX - self.canvas.offsetLeft;374 self.my = e.pageY - self.canvas.offsetTop;375 self.currentHue = rand(self.hueMin, self.hueMax);376 self.createFireworks(self.cw/2, self.ch, self.mx, self.my);377 });378 });379 380 $(self.canvas).on('mouseup', function(e){381 $(self.canvas).off('mousemove.fireworks');382 });383 384 }385 386 self.clear = function(){387 self.particles = [];388 self.fireworks = [];389 self.ctx.clearRect(0, 0, self.cw, self.ch);390 };391 392 393 self.canvasLoop = function(){394 requestAnimFrame(self.canvasLoop, self.canvas);395 self.ctx.globalCompositeOperation = 'destination-out';396 self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';397 self.ctx.fillRect(0,0,self.cw,self.ch);398 self.updateFireworks();399 self.updateParticles();400 self.drawFireworks();401 self.drawParticles();402 403 };404 405 self.init();406 407 }408 var fworks = new Fireworks();409 410 });411 412 </script>413 414 </body>415 </html>

广大网友们!因为这是放假的时候老师给发的!所以我也看不太懂有些东西!实在是抱歉 ? 有什么不明白的,就留言告诉我!我去找我曾经的老师问问,虽然他已经退休好久了!!

小编还为您整理了以下内容,可能对您也有帮助:

如何用css制作网页如何用css制作网页鼠标图案

如何在HTML网页中使用CSS样式?

制作网页时,有四种方法可以添加Css样式。让我们来看看这四种方式:

1.使用样式属性:直接将样式属性添加到单个组件标签。

属性(attribute)2:设置值2;...}

例如:

字体大小:9pt字体系列:行高:150%

这种用法的好处是可以巧妙地将样式应用到各种标签上,缺点是没有整个文档的“统一性”。

第二,使用样式标签:在中编写样式规则;...在标签里。

一般来说,整个

三。使用链接标记:在的样式文件中编写样式规则。css,然后使用

注意,行尾的分号是绝对必要的!这样,你也可以把

html怎么做页面内的网页?

1.IFrame引入

有时候需要把其他地方的页面嵌套到当前的的网站的某个模块中,就可以使用iframe嵌套

iframename=content_framemarginwidth=0marginheight=0width=100%height=30src=import.htmframeborder=0>

/iframe>

2.object>方式

利用object>/object>的data属性,data属性用于指定供对象处理的数据文件的URL。

该属性的值是文件的URL,该URL可能是相对于文件基本URL的绝对URL或相对URL,或者是相对于用codebase属性提供的URL的绝对或相对URL。

浏览器通过插入到文档中的对象类型来决定数据的类型。该属性类似于img>标签中的src属性,因为它下载的是要由包含对象进行处理的数据。当然,它们之间的差别在于,data属性允许包含【几乎任何文件类型】,而不仅仅是图像文件。

objectstyle=border:0pxtype=text/x-scriptletdata=import.htmwidth=100%height=30>/object>

3.Behavior的download方式

spanid=showImport>/span>

IE:DownloadID=oDownloadSTYLE=behavior:url(#default#download)/>

script>

functiononDownloadDone(downDate){

showImport.innerhtml=downDate

}

oDownload.startDownload(import.htm,onDownloadDone)

/script>

4.使用JQuery的load方法

$(document).ready(function(){

$(.top).load(top.html);

$(.footer).load(footer.html);

});

dw制作个人淘宝网页的步骤?

1.

在电脑上点击打开【Dreamweaver】软件。

2.

点击【文件】-【新建】。

3.

页面选择【HTML】点击右下角的【确定】。

4.

创建完成后点击功能栏的【表格】。

用html如何制作一个简单的网页代码?

1、首先,在计算机桌面上创建一个新文件夹,然后在该文件夹中创建一个新的文本文档。

2、然后双击打开带有记事本的文本文档,如下图所示,我们编写一个简单的html代码。3、单击“另存为”的功能选项,显示默认保存为编码为ANSI。4、我们将更改编码和文件名,将其更改为如图所示的图像并保存。5、然后返回到新创建的文件夹,发现有一个额外的html文件。6、最后,使用浏览器打开html文件,效果如图所示,简单的网页被成功编写。

Dreamweaver静态网页制作步骤有哪些?

1、在Dreamveaver中“文件—新建—常规—基本页—HTML”,这就建好了一个页面,英文版的默认为文件名untitled.htm。中文版的默认为文件名“无标题文档”。htm表示的是这个网页文件是一个静态的HTML文件。可以给它改名为index.htm。

2、在标题空格那里输入网页的名称,点击—页面属性,打开这个窗口后在这里可以设置网站标题、背景颜色还有背景图像,超级链接颜色,其他都保持默认值就可以了。

3.这个时候光标在左上角,你可以输入一句话,如“欢迎大家来到我的主页”,用文字,用菜单“窗口/属性”打开属性面板,取文字的大小,再把文字设置为居中,然后在文字的前面敲几下回车就位于页面中间了。

4.要选取字体,即选择字体中的最后一项:即编辑字体列表。然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体,点击中间的按钮就可以加入了。

c#上位机可以做成网页版吗?

不可以。

C#可以做服务端语言,至于WEB前端,必须是使用标准化的东西开发,html+css+js;c#在网页开发中,和PHP,JAVA一样,只是起到后台功能开发作用。

CSS和html如何实现这个效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝购买</title>
<style>
  .taobao{width:224px;height:224px; position:relative; z-index:0; overflow:hidden; cursor:pointer}
  .taobao.img{display:block; position:relative; z-index:0;}
  .taobao a{display:none;height:20px; text-align:center; background:red; color:#fff; text-decoration:none; font-weight:bold; font-family:"新宋体"; font-size:16px; line-height:20px; margin:auto 15px; margin-top:-102px; position:relative; z-index:1000;}
  .zhezao{opacity:0.2; position:relative;z-index:100;height:100%;width:100%; margin-top:-100%; display:none; background:#333}
  .taobao:hover a, .taobao:hover .zhezao{display:block;}
</style>
</head>
<body>
  <div class="taobao">
     <img src="1.png">
     <div class="zhezao"></div><a href="#" target="_blank">去淘宝购买</a>
  </div>
</body>
</html>

随便做了个演示,你根据你自己的要求完善一下!

例外,由于时间紧张,在ie下运行正常,其他浏览器,你在测试修改下!

下面是效果图:

CSS和html如何实现这个效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝购买</title>
<style>
  .taobao{width:224px;height:224px; position:relative; z-index:0; overflow:hidden; cursor:pointer}
  .taobao.img{display:block; position:relative; z-index:0;}
  .taobao a{display:none;height:20px; text-align:center; background:red; color:#fff; text-decoration:none; font-weight:bold; font-family:"新宋体"; font-size:16px; line-height:20px; margin:auto 15px; margin-top:-102px; position:relative; z-index:1000;}
  .zhezao{opacity:0.2; position:relative;z-index:100;height:100%;width:100%; margin-top:-100%; display:none; background:#333}
  .taobao:hover a, .taobao:hover .zhezao{display:block;}
</style>
</head>
<body>
  <div class="taobao">
     <img src="1.png">
     <div class="zhezao"></div><a href="#" target="_blank">去淘宝购买</a>
  </div>
</body>
</html>

随便做了个演示,你根据你自己的要求完善一下!

例外,由于时间紧张,在ie下运行正常,其他浏览器,你在测试修改下!

下面是效果图:

jQuery如何做鼠标点击事件更改CSS

$("body").click(function(){$(".BBB.css('display','none')")});

然后在你的代码下面加一行

$(".AAA).click(function()

{

$(".BBB").css('display','block');

e.stopPropagation();

});

html中怎么使用jQuery和css,js?

(1)jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。

(2)CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

(3)JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它最初由网景公司(Netscape)的Brendan Eich设计,是一种动态、弱类型、基于原型的语言,内置支持类。

JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。

旭新科技网还为您提供以下相关内容希望对您有帮助:

jQuery如何做鼠标点击事件更改CSS

("body").click(function(){$(".BBB.css('display','none')")});然后在你的代码下面加一行 (".AAA).click(function(){ (".BBB").css('display','block');e.stopPropagation();});

求一个h5实现多个气球下落时 点击气球 气泡爆裂的js/jquery代码

var ele = $("&lt;div class='box' /&gt;").appendTo(this.wrap);ele.html(this.createStr());ele.data("code",ele.html().charCodeAt(0));ele.css({ "left": (this.wrap.width()-50)*Math.random()});if(!

html css这种效果怎么做?

需要引入jQuery,HTML代码如下:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; ul,li,p { margin: 0;padding: 0;list-style: none;} .time { width: 10...

html中怎么使用jQuery和css,js?

全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。(2)CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新...

jQuery如何做鼠标点击事件更改CSS

做鼠标点击事件更改CSS方法:若点击AAA后一直都是none,点任意一个地方都是none.&lt;div class="BBB" style="display: none;"&gt; 则把hide,show方法,换成css(),和你上面那样式放进去即可。层叠样式表(英文全称:Cascading ...

html中使用jQuery和css,js的方法

首选,你要清楚css和jQuery(js)是什么。首先,css是一种网页的样式语言,主要了解其选择器与属性设置。css是可以直接写在html页面中的,它使用的是一种style的标签(&lt;style&gt;css代码&lt;/style&gt;),直接在标签中写css的代码...

jquery里实现鼠标经过变色

.hover() 方法应该这样用 :.hover(fn1,fn2);而你把第二个函数写在了hover()之外,给你改了一下,可以用了:--- &lt;script&gt; $(document).ready(function(){$('div').hover(function(){$(this).addClass('myblu...

jquery鼠标点击事件,改变背景色

你的意思是不是:鼠标移动高亮显示div,点击div就选中当前div(单选),完整代码如下:&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;jquery鼠标点击事件,改变背景色&lt;/...

jquery鼠标点击事件是什么?

8、toggle事件:鼠标点击切换事件 ('p').toggle(function(){},function(){} );示例 12345678 $("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("back...

jquery 手风琴特效 鼠标点击触发效果怎么改

(document).ready(function() { $("#accordion .trigger").each(function(i) { /*---*/ $(this).hover(function() { $("#accordion .trigger").css("background", 'url("../images/jia.jpg")...

Top