js效果图分析（如何用javascript做出点击屏幕产生烟花效果）

本文目录

• 如何用javascript做出点击屏幕产生烟花效果
• 在建筑结构施工图中详JS什么意思
• 请问上拉菜单用js怎么实现效果图如下：
• JS选择器：效果图如下截屏所示，当点击全选时，下面三项全选勾上，点击反选时，下面三项反选，
• js+css 圆形/环形 排列

如何用javascript做出点击屏幕产生烟花效果

《!DOCTYPE html》
***隐藏网址***
《html》
***隐藏网址***
《meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"》
《meta name="apple-mobile-web-app-capable" content="yes"》
《meta name="apple-mobile-web-app-status-bar-style" content="black"》
《title》烟花《/title》
《style type="text/css"》
html,body{height:100%;margin:0;padding:0}
ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
img{border:0}
body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
#header img{width:100%; height:20%;}
#bg img{width:100%; height:80%;}
#header,#bg{position:fixed;left:0;right:0;z-index:10}
#header{top:0}
#bg{position:fixed;z-index:1;}
audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}
《/style》
《link rel="shortcut icon" type="image/x-icon" href=""》
《style type="text/css"》《/style》《style id="style-1-cropbar-clipper"》
.en-markup-crop-options {
    top: 18px !important;
    left: 50% !important;
    margin-left: -100px !important;
    width: 200px !important;
    border: 2px rgba(255,255,255,.38) solid !important;
    border-radius: 4px !important;
}
.en-markup-crop-options div div:first-of-type {
    margin-left: 0px !important;
}
#.bg {
background-color: black;
}
《/style》
《/head》
《body》
《div id="bg"》《/div》
***隐藏网址***
《script type="text/javascript"》
$(function(){
var Fireworks = function(){
var self = this;
var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}
var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h3){return !(x1 + w1 《 x2 || x2 + w2 《 x1 || y1 + h1 《 y2 || y2 + h3 《 y1);};
window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
self.init = function(){ 
self.canvas = document.createElement(’canvas’);             
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();         
self.particles = ;    
self.partCount = 150;
self.fireworks = ;    
self.mx = self.cw/2;
self.my = self.ch/2;
self.currentHue = 30;
self.partSpeed = 5;
self.partSpeedVariance = 10;
self.partWind = 50;
self.partFriction = 5;
self.partGravity = 1;
self.hueMin = 0;
self.hueMax = 360;
self.fworkSpeed = 4;
self.fworkAccel = 10;
self.hueVariance = 30;
self.flickerDensity = 25;
self.showShockwave = true;
self.showTarget = false;
self.clearAlpha = 25;
$(document.body).append(self.canvas);
self.ctx = self.canvas.getContext(’2d’);
self.ctx.lineCap = ’round’;
self.ctx.lineJoin = ’round’;
self.lineWidth = 1;
self.bindEvents();          
self.canvasLoop();
self.canvas.onselectstart = function() {
return false;
};
};      
self.createParticles = function(x,y, hue){
var countdown = self.partCount;
while(countdown--){
var newParticle = {
    x: x,
    y: y,
    coordLast: [
        {x: x, y: y},
        {x: x, y: y},
        {x: x, y: y}
    ],
    angle: rand(0, 360),
    speed: rand(((self.partSpeed - self.partSpeedVariance) 《= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),
    friction: 1 - self.partFriction/100,
    gravity: self.partGravity/2,
    hue: rand(hue-self.hueVariance, hue+self.hueVariance),
    brightness: rand(50, 80),
    alpha: rand(40,100)/100,
    decay: rand(10, 50)/1000,
    wind: (rand(0, self.partWind) - (self.partWind/2))/25,
    lineWidth: self.lineWidth
};              
self.particles.push(newParticle);
}
};
self.updateParticles = function(){
var i = self.particles.length;
while(i--){
var p = self.particles;
var radians = p.angle * Math.PI / 180;
var vx = Math.cos(radians) * p.speed;
var vy = Math.sin(radians) * p.speed;
p.speed *= p.friction;
                
p.coordLast.x;
p.coordLast.y;
p.coordLast.x;
p.coordLast.y;
p.coordLast.x = p.x;
p.coordLast.y = p.y;
p.x += vx;
p.y += vy;
p.y += p.gravity;
p.angle += p.wind;              
p.alpha -= p.decay;
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){                  
    self.particles.splice(i, 1);    
}
};
};
self.drawParticles = function(){
var i = self.particles.length;
while(i--){
var p = self.particles;                          
var coordRand = (rand(1,3)-1);
self.ctx.beginPath();                               
self.ctx.moveTo(Math.round(p.coordLast.y));
self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
self.ctx.closePath();               
self.ctx.strokeStyle = ’hsla(’+p.hue+’, 100%, ’+p.brightness+’%, ’+p.alpha+’)’;
self.ctx.stroke();              
if(self.flickerDensity 》 0){
    var inverseDensity = 50 - self.flickerDensity;                  
    if(rand(0, inverseDensity) === inverseDensity){
        self.ctx.beginPath();
        self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)
        self.ctx.closePath();
        var randAlpha = rand(50,100)/100;
        self.ctx.fillStyle = ’hsla(’+p.hue+’, 100%, ’+p.brightness+’%, ’+randAlpha+’)’;
        self.ctx.fill();
    }   
}
};
};
self.createFireworks = function(startX, startY, targetX, targetY){
var newFirework = {
x: startX,
y: startY,
startX: startX,
startY: startY,
hitX: false,
hitY: false,
coordLast: [
    {x: startX, y: startY},
    {x: startX, y: startY},
    {x: startX, y: startY}
],
targetX: targetX,
targetY: targetY,
speed: self.fworkSpeed,
angle: Math.atan2(targetY - startY, targetX - startX),
shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),
acceleration: self.fworkAccel/100,
hue: self.currentHue,
brightness: rand(50, 80),
alpha: rand(50,100)/100,
lineWidth: self.lineWidth
};          
self.fireworks.push(newFirework);
};
self.updateFireworks = function(){
var i = self.fireworks.length;
while(i--){
var f = self.fireworks;
self.ctx.lineWidth = f.lineWidth;
vx = Math.cos(f.angle) * f.speed,
vy = Math.sin(f.angle) * f.speed;
f.speed *= 1 + f.acceleration;              
f.coordLast.x;
f.coordLast.y;
f.coordLast.x;
f.coordLast.y;
f.coordLast.x = f.x;
f.coordLast.y = f.y;
if(f.startX 》= f.targetX){
    if(f.x + vx 《= f.targetX){
        f.x = f.targetX;
        f.hitX = true;
    } else {
        f.x += vx;
    }
} else {
    if(f.x + vx 》= f.targetX){
        f.x = f.targetX;
        f.hitX = true;
    } else {
        f.x += vx;
    }
}
if(f.startY 》= f.targetY){
    if(f.y + vy 《= f.targetY){
        f.y = f.targetY;
        f.hitY = true;
    } else {
        f.y += vy;
    }
} else {
    if(f.y + vy 》= f.targetY){
        f.y = f.targetY;
        f.hitY = true;
    } else {
        f.y += vy;
    }
}               
if(f.hitX && f.hitY){
    self.createParticles(f.targetX, f.targetY, f.hue);
    self.fireworks.splice(i, 1);
    
}
};
};
self.drawFireworks = function(){
var i = self.fireworks.length;
self.ctx.globalCompositeOperation = ’lighter’;
while(i--){
var f = self.fireworks;      
self.ctx.lineWidth = f.lineWidth;
var coordRand = (rand(1,3)-1);                  
self.ctx.beginPath();                           
self.ctx.moveTo(Math.round(f.coordLast.y));
self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
self.ctx.closePath();
self.ctx.strokeStyle = ’hsla(’+f.hue+’, 100%, ’+f.brightness+’%, ’+f.alpha+’)’;
self.ctx.stroke();  
if(self.showTarget){
    self.ctx.save();
    self.ctx.beginPath();
    self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)
    self.ctx.closePath();
    self.ctx.lineWidth = 1;
    self.ctx.stroke();
    self.ctx.restore();
}
    
if(self.showShockwave){
    self.ctx.save();
    self.ctx.translate(Math.round(f.x), Math.round(f.y));
    self.ctx.rotate(f.shockwaveAngle);
    self.ctx.beginPath();
    self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);
    self.ctx.strokeStyle = ’hsla(’+f.hue+’, 100%, ’+f.brightness+’%, ’+rand(25, 60)/100+’)’;
    self.ctx.lineWidth = f.lineWidth;
    self.ctx.stroke();
    self.ctx.restore();
}
};
};
self.bindEvents = function(){
$(window).on(’resize’, function(){          
clearTimeout(self.timeout);
self.timeout = setTimeout(function() {
    self.canvas.width = self.cw = $(window).innerWidth();
    self.canvas.height = self.ch = $(window).innerHeight();
    self.ctx.lineCap = ’round’;
    self.ctx.lineJoin = ’round’;
}, 100);
});
$(self.canvas).on(’mousedown’, function(e){
self.mx = e.pageX - self.canvas.offsetLeft;
self.my = e.pageY - self.canvas.offsetTop;
self.currentHue = rand(self.hueMin, self.hueMax);
self.createFireworks(self.cw/2, self.ch, self.mx, self.my); 
$(self.canvas).on(’mousemove.fireworks’, function(e){
    self.mx = e.pageX - self.canvas.offsetLeft;
    self.my = e.pageY - self.canvas.offsetTop;
    self.currentHue = rand(self.hueMin, self.hueMax);
    self.createFireworks(self.cw/2, self.ch, self.mx, self.my);                                 
});             
});
$(self.canvas).on(’mouseup’, function(e){
$(self.canvas).off(’mousemove.fireworks’);                                  
});
        
}
self.clear = function(){
self.particles = ;
self.fireworks = ;
self.ctx.clearRect(0, 0, self.cw, self.ch);
};
self.canvasLoop = function(){
requestAnimFrame(self.canvasLoop, self.canvas);         
self.ctx.globalCompositeOperation = ’destination-out’;
self.ctx.fillStyle = ’rgba(0,0,0,’+self.clearAlpha/100+’)’;
self.ctx.fillRect(0,0,self.cw,self.ch);
self.updateFireworks();
self.updateParticles();
self.drawFireworks();           
self.drawParticles();
};
self.init();        
}
var fworks = new Fireworks();
});
《/script》
《script type="text/javascript"》
$(document).ready(function() {
setTimeout(function() {
$("#header").hide("slow");
},2000);
});
《/script》
《/body》
《/html》

在建筑结构施工图中详JS什么意思

JS一般是建施或结施的意思。

详JS也就是详见建筑施工图哪张图纸，或者详见结构施工图哪张图纸。

看不懂建筑图符号，看图能力就相当与废了一半，所以就算有多难都必须要学会。

1、板——B

2、屋面板——WB

3、空心板——KB

4、槽行板——CB

5、折板——ZB

6、密助板——MB

7、楼梯板——TB

8、盖板或沟盖板——GB

9、楼梯梁——TL

扩展资料：

建筑施工注意事项：

1、在用喷灯、电焊机以及必要生火的地方，要填写用火申请登记和设专人看管，随带消防器材等，保证消防措施的落实。施焊时，特别注意检查下方有无易燃物，并做好相应的防护，用完后要检查，确认无火后再离开。

2、高处作业材料和工具等物件不得上抛下掷。

3、未经安全教育培训合格不得上岗，非操作者严禁进入危险区域；特种作业必须持特种作业资格证上岗。

4、凡2m以上的高处作业无安全设施，必须系好安全带；安全带必须先挂牢后再作业。

5、机械设备、机具使用，必须做到“定人、定机”制度；未经有关人员同意，非操作人员不得使用。

6、从事高空作业人员要定期体验。凡患有高血压、心脏病、贫血症、癫痫病以及不适于高空作业的人员，不得从事高空作业。

7、电动机械设备，必须有漏电保护装置和可靠保护接零，方可启动使用。

请问上拉菜单用js怎么实现效果图如下：

最简单的方法就是把二级菜单的样式设置为：
1：oe_secondary_submenu {display:none;}
2：在点击的时候显示二级菜单：
$(".oe_secondary_submenu").data("onShow")=false; //一开始状态为隐藏
$(".oe_secondary_menu_section").click(function(){
if($(".oe_secondary_submenu").data("onShow")){ //切换二级菜单的同时改变状态
$(".oe_secondary_submenu").hide();
$(".oe_secondary_submenu").data("onShow",false);
}else{
$(".oe_secondary_submenu").show();
$(".oe_secondary_submenu").data("onShow",true);
}
});

JS选择器：效果图如下截屏所示，当点击全选时，下面三项全选勾上，点击反选时，下面三项反选，

Javascript

《script type="text/javascript"》
window.onload = function() {
var inputs = document.getElementsByTagName("input");

document.onclick = function(e) {
e = e || window.event;
if(e.target.id === "selectAll"
|| e.target.id === "selectOpp"
|| e.target.id === "selectNone") {

for(var i = 0; i 《 inputs.length; i++) {
if(inputs.type === "checkbox"
&& inputs.id != "selectAll"
&& inputs.id != "selectOpp"
&& inputs.id != "selectNone") {

if(e.target.id === "selectAll") {
inputs.checked = true;
}
else if(e.target.id === "selectOpp") {
if(inputs.checked)
inputs.checked = false;
else
inputs.checked = true;
}
else {
inputs.checked = false;
}
}
}
return false;
}
else if(e.target.type === "checkbox") {
e.target.parentNode.style.background =
e.target.checked ? "#f00" : "none";
}
};
};
《/script》

jQuery

《script type="text/javascript" src="jquery.js"》《/script》
《script type="text/javascript"》
$(function() {
var checkboxes = $(":checkbox")
.not("#selectAll, #selectOpp, #selectNone");

$("#selectAll").click(function() {
checkboxes.prop("checked", true);
return false;
});

$("#selectOpp").click(function() {
checkboxes.each(function() {
$(this).prop("checked",
$(this).is(":checked") ? false : true);
});
return false;
});

$("#selectNone").click(function() {
checkboxes.prop("checked", false);
return false;
});

checkboxes.change(function() {
$(this).parent().css("background",
$(this).is(":checked") ? "#f00" : "none");
});
});
《/script》

HTML

《p》《input type="checkbox" id="selectAll" /》 全选
《input type="checkbox" id="selectOpp" /》 反选
《input type="checkbox" id="selectNone" /》 清空《/p》
《div》《input type="checkbox" /》 xxx《/div》
《div》《input type="checkbox" /》 yyy《/div》
《div》《input type="checkbox" /》 zzz《/div》

js+css 圆形/环形 排列

项目需要做个环形的导航排列，网上找到一篇详细介绍原理的文章 javascript-按圆形排列DIV元素(一)---- 分析 ，然后尝试着把它实现了，效果图如下：

源码分享给大家哦，拿走不谢O(∩_∩)O

vue版本的根据项目需求做了些略微的修改