particcles.js in 安卓WebView

標籤：over   minimum   splay   border   logs   中文   otherwise   false   text   

json:

{  "particles": {    "number": {      "value": 80,      "density": {        "enable": true,        "value_area": 800      }    },    "color": {      "value": "#333333"    },    "shape": {      "type": "circle",      "stroke": {        "width": 0,        "color": "#707070"      },      "polygon": {        "nb_sides": 5      },      "image": {        "src": "img/github.svg",        "width": 100,        "height": 100      }    },    "opacity": {      "value": 0.5,      "random": false,      "anim": {        "enable": false,        "speed": 1,        "opacity_min": 0.1,        "sync": false      }    },    "size": {      "value": 5,      "random": false,      "anim": {        "enable": true,        "speed": 10,        "size_min": 1,        "sync": false      }    },    "line_linked": {      "enable": true,      "distance": 150,      "color": "#707070",      "opacity": 0.4,      "width": 1    },    "move": {      "enable": true,      "speed": 6,      "direction": "none",      "random": false,      "straight": false,      "out_mode": "out",      "attract": {        "enable": false,        "rotateX": 600,        "rotateY": 1200      }    }  },  "interactivity": {    "detect_on": "canvas",    "events": {      "onhover": {        "enable": true,        "mode": "grab"      },      "onclick": {        "enable": false,        "mode": "push"      },      "resize": true    },    "modes": {      "grab": {        "distance": 200,        "line_linked": {          "opacity": 1        }      },      "bubble": {        "distance": 400,        "size": 40,        "duration": 2,        "opacity": 8,        "speed": 3      },      "repulse": {        "distance": 200      },      "push": {        "particles_nb": 4      },      "remove": {        "particles_nb": 2      }    }  },  "retina_detect": true,  "config_demo": {    "hide_card": false,    "background_color": "#b61924",    "background_image": "",    "background_position": "50% 50%",    "background_repeat": "no-repeat",    "background_size": "cover"  }}

app.js:

/* -----------------------------------------------/* How to use? : Check the GitHub README/* ----------------------------------------------- */particlesJS.load(‘particles-js‘, ‘js/particles.json‘, function() {  console.log(‘particles.js loaded - callback‘);});/* Otherwise just put the config content (json): */particlesJS(‘particles-js‘,    {    "particles": {      "number": {        "value": 80,        "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,        "anim": {          "enable": false,          "speed": 1,          "opacity_min": 0.1,          "sync": false        }      },      "size": {        "value": 5,        "random": true,        "anim": {          "enable": false,          "speed": 40,          "size_min": 0.1,          "sync": false        }      },      "line_linked": {        "enable": true,        "distance": 150,        "color": "#ffffff",        "opacity": 0.4,        "width": 1      },      "move": {        "enable": true,        "speed": 6,        "direction": "none",        "random": false,        "straight": false,        "out_mode": "out",        "attract": {          "enable": false,          "rotateX": 600,          "rotateY": 1200        }      }    },    "interactivity": {      "detect_on": "canvas",      "events": {        "onhover": {          "enable": true,          "mode": "repulse"        },        "onclick": {          "enable": true,          "mode": "push"        },        "resize": true      },      "modes": {        "grab": {          "distance": 400,          "line_linked": {            "opacity": 1          }        },        "bubble": {          "distance": 400,          "size": 40,          "duration": 2,          "opacity": 8,          "speed": 3        },        "repulse": {          "distance": 200        },        "push": {          "particles_nb": 4        },        "remove": {          "particles_nb": 2        }      }    },    "retina_detect": true,    "config_demo": {      "hide_card": false,      "background_color": "#b61924",      "background_image": "",      "background_position": "50% 50%",      "background_repeat": "no-repeat",      "background_size": "cover"    }  });

css:

/* =============================================================================   HTML5 CSS Reset Minified - Eric Meyer   ========================================================================== */html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent}body {line-height: 1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block}nav ul {list-style: none}blockquote,q {quotes: none}blockquote:before,blockquote:after,q:before,q:after {content: none}a {margin: 0;padding: 0;font-size: 100%;vertical-align: baseline;background: transparent;text-decoration: none}mark {background-color: #ff9;color: #000;font-style: italic;font-weight: bold}del {text-decoration: line-through}abbr[title],dfn[title] {border-bottom: 1px dotted;cursor: help}table {border-collapse: collapse;border-spacing: 0}hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0}input,select {vertical-align: middle}li {list-style: none}/* =============================================================================   My CSS   ========================================================================== *//* ---- base ---- */html,body {width: 100%;height: 100%;background: #111;}html {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}body {font: normal 75% Arial, Helvetica, sans-serif;}canvas {display: block;vertical-align: bottom;}/* ---- particles.js container ---- */#particles-js {width: 100%;height: 100%;background-color: white;background-image: url(‘‘);background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}

index.html:

<!DOCTYPE html><html lang="en"><!-- 中文文檔 --><!-- http://www.cnblogs.com/zx-admin/p/7030978.html -->    <head>        <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">    </head>    <body>        <div id="particles-js"></div>        <script type="text/javascript" src="js/particles.js"></script>        <script src="js/app.js"></script>    </body></html>

Android:

 public void initWebview() {        WebSettings wSet = wvLoginMain.getSettings();        wSet.setJavaScriptEnabled(true);        wSet.setAllowFileAccessFromFileURLs(true);//解決跨域問題        wvLoginMain.loadUrl("file:///android_asset/login/index.html");    }

 

particcles.js in 安卓WebView