Json:
{"particles": {"number": {"value": $, "density": {"Enable": True, "Value_area": 800 }}, "Color": {"value": "#333333"}, "shape": {"type": "Circle", "stroke": {"width": 0, "color": "#707070"}, "polygon": {"Nb_sides": 5}, "image": {"src": "Img/git Hub.svg "," width ": +," height ": +}," 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": Ten, "Size_mi N ": 1," Sync ": false}," line_linked ": {" Enable ": True," distance ":" Max "," Color ":" #70 7070 "," opacity ": 0.4," width ": 1}," move ": {" Enable ": true," Speed ": 6," direction ":" No Ne "," random ": FalsE, "straight": false, "Out_mode": "Out", "attract": {"Enable": false, "Rotatex": 600, "Rotatey": "interactivity": {"detect_on": "Canvas", "events": {"Onhover": {"en Able ": True," mode ":" Grab "}," onclick ": {" Enable ": false," mode ":" Push "}," R Esize ": true}," modes ": {" grab ": {" Distance ": $," line_linked ": {" opacity ": 1 }}, "bubble": {"distance": +, "size": +, "duration": 2, "opacity": 8, "Speed": 3}, "Repulse": {"Distance": "$", "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:mi Ddle}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><HTMLLang= "en"><!--Chinese Documents -<!--http://www.cnblogs.com/zx-admin/p/7030978.html - <Head> <MetaCharSet= "Utf-8"> <title>Particles.js</title> <Metaname= "description"content= "Particles.js is a lightweight JavaScript library for creating particles."> <Metaname= "Author"content= "Vincent Garreau" /> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no"> <Linkrel= "stylesheet"Media= "Screen"href= "Css/style.css"> </Head> <Body> <DivID= "Particles-js"></Div> <Scripttype= "Text/javascript"src= "Js/particles.js"></Script> <Scriptsrc= "Js/app.js"></Script> </Body></HTML>
Android:
Public void Initwebview () { = wvloginmain.getsettings (); Wset.setjavascriptenabled (true); Wset.setallowfileaccessfromfileurls (true); //Troubleshoot cross-domain issues Wvloginmain.loadurl ("file:///android_asset/login/index.html"); }
Particcles.js in Android WebView