好久没登录知乎，发现他们的登录页面粒子动态效果蛮炫的，查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果。
感觉有比格，就照着弄了一个,玩玩。
github:&https://github.com/VincentGarreau/particles.js/
操作过程：
网上有基本流程，可以参考一下，不过直接用在登录页面 会有小bug，需要调整下。
1、首先在页面中引入particles.js文件。
&script src="js/particles.js"&&/script&
2、在页面中使用一个div来作为放置粒子的容器。[一般放最底部，css 需要改进一下]
&div id="particles"&&/div&
&style type="text/css"&
#particles {
width: 100%;
z-index: -1;
//这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
background-color: #26AFE3;
3、加载配置文件: &网上讲 用load()方法 还得弄个配置的json文件，光路径 就搞残了我。
& & & & & & & & & 参考官方demo &
& & & & & & & & & 直接在js里面写配置
&script type="text/javascript"&
particlesJS.load('particles', './js/app/particles.json', function() {
console.log('callback - particles.js config loaded');
particlesJS("particles", {
"particles": {
"number": {
"value": 30,
"density": {
"enable": true,
"value_area": 800
"color": {
"value": "#ffffff"
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
"polygon": {
"nb_sides": 5
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
"opacity": {
"value": 0.5,
"random": false,
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
"value": 10,
"random": true,
"enable": false,
"speed": 50,
"size_min": 0.1,
"sync": false
"line_linked": {
"enable": true,
"distance": 300,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
"enable": true,
"speed": 8,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
"onclick": {
"enable": false,
"mode": "push"
"resize": true
"modes": {
"distance": 800,
"line_linked": {
"opacity": 1
"bubble": {
"distance": 800,
"size": 80,
"duration": 2,
"opacity": 0.8,
"speed": 3
"repulse": {
"distance": 400,
"duration": 0.4
"particles_nb": 4
"remove": {
"particles_nb": 2
"retina_detect": true
4，配置参数 option 以及使用： &option &github 官网页面就有详情。控制粒子数量 运动速度 什么的
& &particles 用起来还是有点问题的，在chrome 下载文件后再切换到这个页面 就残废了。等解决方法。
阅读(...) 评论()解决Myeclipse中导入自定义的配色方案后，JSP中的js代码块为白色背景的问题 - 四喜 - 博客园
随笔 - 167, 文章 - 0, 评论 - 122, 引用 - 0
& 捣鼓了大半个上午，终于搞定。这样设置就可以了：
点击MyEclipse上方的菜单栏中的window菜单、选择Preferences菜单项、在弹出的窗口的左侧树形菜单依次选择：MyEclipse、Files and Editors、Javascript、Editor、Syntax Coloring。
再在右边点开Background、Script Block 在右边自定义你需要的颜色，Apply即可。
如下图所示：particles.js使用及配置
参考：http://blog.csdn.net/csdn_yudong/article/details/
这个项目中有提供demo，可以直接，打开demo里面的index.html文件，即可看到效果。
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&particles.js&/title&
&meta name="description" content="particles.js is a lightweight JavaScript library for creating particles."&
&meta name="author" content="Vincent Garreau" /&
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&link rel="stylesheet" media="screen" href="css/style.css"&
&div id="particles-js"&&/div&
&!-- scripts --&
&script src="js/particles.js"&&/script&
&script src="js/app.js"&&/script&
particles.js&是它的库，我们肯定是要引入的，app.js&是参数配置文件，我们也要引入，而 demo 中的&stats.js&就没有必要引入了。&style.css&我们也可以引入，背景颜色是在css中设置的。
particlesJS('particles-js',
"particles": {
"number": {
"value": <span style="color: #,
"density": {
"enable": true,
"value_area": <span style="color: #0
"color": {
"value": "#ffffff"
"shape": {
"type": "circle",
"stroke": {
"width": <span style="color: #,
"color": "#000000"
"polygon": {
"nb_sides": <span style="color: #
"image": {
"src": "img/github.svg",
"width": <span style="color: #0,
"height": <span style="color: #0
"opacity": {
"value": <span style="color: #.5,
"random": false,
"enable": false,
"speed": <span style="color: #,
"opacity_min": <span style="color: #.1,
"sync": false
"value": <span style="color: #,
"random": true,
"enable": false,
"speed": <span style="color: #,
"size_min": <span style="color: #.1,
"sync": false
"line_linked": {
"enable": true,
"distance": <span style="color: #0,
"color": "#ffffff",
"opacity": <span style="color: #.4,
"width": <span style="color: #
"enable": true,
"speed": <span style="color: #,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": <span style="color: #0,
"rotateY": <span style="color: #00
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
"onclick": {
"enable": false,
"mode": "push"
"resize": true
"modes": {
"distance": <span style="color: #0,
"line_linked": {
"opacity": <span style="color: #
"bubble": {
"distance": <span style="color: #0,
"size": <span style="color: #,
"duration": <span style="color: #,
"opacity": <span style="color: #,
"speed": <span style="color: #
"repulse": {
"distance": <span style="color: #0
"particles_nb": <span style="color: #
"remove": {
"particles_nb": <span style="color: #
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "<span style="color: #% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
配置说明：
键值参数选项/ 说明实例
particles.number.value
number & 数量
particles.number.density.enable
boolean &&
true&/&false
particles.number.density.value_area
number & 区域散布密度大小
particles.color.value
HEX (string)&RGB (object)&HSL (object)&array selection (HEX)&random (string)
原子的颜色
"#b61924"&{r:182, g:25, b:36}&{h:356, s:76, l:41}&["#b61924", "#333333", "999999"]&"random"
particles.shape.type
string&array selection 原子的形状
"circle"&"edge"&"triangle"&"polygon"&"star"&"image"&["circle", "triangle", "image"]
particles.shape.stroke.width
number & & &原理的宽度
particles.shape.stroke.color
HEX (string) &原子颜色
particles.shape.polygon.nb_slides
number & & & 原子的多边形边数
particles.shape.image.src
path link&svg / png / gif / jpg &原子的图片可以使用自定义图片
"assets/img/yop.svg"&"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width
number&(for aspect ratio) & &图片宽度
particles.shape.image.height
number&(for aspect ratio) 图片高度
particles.opacity.value
number (0 to 1) & 不透明度
particles.opacity.random
boolean & & 随机不透明度
true&/&false
particles.opacity.anim.enable
boolean & & & & & &渐变动画
true&/&false
particles.opacity.anim.speed
number & & & & & &渐变动画速度
particles.opacity.anim.opacity_min
number (0 to 1) & & &&渐变动画不透明度
particles.opacity.anim.sync
true&/&false
particles.size.value
number & & & 原子大小
particles.size.random
boolean & & & 原子大小随机
true&/&false
particles.size.anim.enable
boolean & & &原子渐变
true&/&false
particles.size.anim.speed
number & &&原子渐变速度
particles.size.anim.size_min
particles.size.anim.sync
true&/&false
particles.line_linked.enable
boolean & & & 连接线
true&/&false
particles.line_linked.distance
number & & &&连接线距离
particles.line_linked.color
HEX (string) &&连接线颜色
particles.line_linked.opacity
number (0 to 1) & &连接线不透明度
particles.line_linked.width
number & &&连接线的宽度
particles.move.enable
boolean & & 原子移动
true&/&false
particles.move.speed
number & & 原子移动速度
particles.move.direction
string & & & & & & &原子移动方向
"none"&"top"&"top-right"&"right"&"bottom-right"&"bottom"&"bottom-left"&"left"&"top-left"
particles.move.random
boolean & & & & & & &移动随机方向
true&/&false
particles.move.straight
boolean & & & & & & &直接移动
true&/&false
particles.move.out_mode
string &(out of canvas) & & & &是否移动出画布
"out"&"bounce"
particles.move.bounce
boolean&(between particles) & 是否跳动移动
true&/&false
particles.move.attract.enable
boolean & & & & & 原子之间吸引
true&/&false
particles.move.attract.rotateX
number &&原子之间吸引X水平距离
particles.move.attract.rotateY
number &y垂直距离
interactivity.detect_on
string & & & &原子之间互动检测
"canvas", "window"
interactivity.events.onhover.enable
boolean & &悬停
true&/&false
interactivity.events.onhover.mode
string&array selection
"grab"& & &抓取临近的"bubble"&&泡沫球效果"repulse"& 击退效果["grab", "bubble"]
interactivity.events.onclick.enable
boolean &点击效果
true&/&false
interactivity.events.onclick.mode
string&array selection
点击效果模式
"push"&"remove"&"bubble"&"repulse"&["push", "repulse"]
interactivity.events.resize
boolean & & & & 互动事件调整
true&/&false
interactivity.events.modes.grab.distance
number & & & &原子互动抓取距离
interactivity.events.modes.grab.line_linked.opacity
number (0 to 1) & & & &原子互动抓取距离连线不透明度
interactivity.events.modes.bubble.distance
number & & & 原子抓取泡沫效果之间的距离
interactivity.events.modes.bubble.size
number & & &&原子抓取泡沫效果之间的大小
interactivity.events.modes.bubble.duration
number & &原子抓取泡沫效果之间的持续事件(second)
interactivity.events.modes.repulse.distance
number & & &&击退效果距离
interactivity.events.modes.repulse.duration
number & & &击退效果持续事件(second)
interactivity.events.modes.push.particles_nb
number & & & &&粒子推出的数量
interactivity.events.modes.push.particles_nb
retina_detect
true&/&false
阅读(...) 评论()那 在 js中怎么设置div的背景图片呢_百度知道
那 在 js中怎么设置div的背景图片呢
我有更好的答案
有两种比较直接的方式，第一种方法：预先设置一个样式，然后在js中操作，给div加上这个class。html代码：-----&div id=&test&&&/div&-----预先设置一个样式：-----.bg {
background-image: url(xxx.jpg);}-----然后js获取这个div，给div加上名为bg的class-----var div = document.getElementById(&#39;test&#39;);div.className += &#39; bg&#39;;-----第二种方法，直接设置div的style属性：-----var div = document.getElementById(&#39;test&#39;);div.style.backgroundImage = &#39;url(xxx.xxx)&#39;;-----
采纳率：59%
在div中设置一个id,通过jquery获取id,如下$(&#divId&).attr(&style&,&background:url(&#39;/kc/system/images/top.png&#39;) no-width:100%;height:128&);
本回答被提问者采纳
为您推荐：
其他类似问题
背景图片的相关知识
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。怎么用JS动态更改DIV层的背景色？_百度知道
怎么用JS动态更改DIV层的背景色？
我有更好的答案
&html&&head&&script language=&javascript&&function a(){ document.getElementById(&d&).style.background=&red&;}&/script&&/head&&body onload=&a()&&&div id=&d&&&/div&&/body&&/html&
可以在层上加上onmouseover事件&div onmouseover=&javascript:this.style.backgroundColor=&#39;#F00&#39;&&123&/div&
本回答被网友采纳
默认是使用了jquery第一种直接修改：$(&#ID&).css({&background-color&:&颜色值&});第二种使用预定义的css:$(&#ID&).removeClass(&旧颜色class&)$(&#ID&).addClass(&新颜色class&)
为您推荐：
其他类似问题
背景色的相关知识
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。