<\/p>\n
\u30e9\u30f3\u30c0\u30e0\u306b\u6d6e\u304b\u3073\u4e0a\u304c\u308b\u30b9\u30d7\u30e9\u30c3\u30b7\u30e5\u3092jQuery\u3067\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n
\u8aad\u307f\u8fbc\u307f\u304c\u5b8c\u4e86\u3059\u308b\u3068\u81ea\u52d5\u3067\u958b\u59cb\u3057\u307e\u3059\u3002<\/p>\n
<\/p>\n
\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n
<script>\r\n$(function () {\r\n\tvar i = 0,\r\n\t\tv = 1,\r\n\t\tsplash;\r\n\r\n\tfunction splashMotion() {\r\n\t\ti = 0;\r\n\t\tv = 0;\r\n\t\tsplash = Math.ceil(Math.random() * 12);\r\n\r\n\t\twhile (i < splash) {\r\n\t\t\t$(\"#main\").prepend(\"<div class='splash'><\/div>\");\r\n\t\t\ti++;\r\n\t\t}\r\n\r\n\t\t$(\".splash\").css({\r\n\t\t\t\"opacity\": \"0\",\r\n\t\t\t\"position\": \"absolute\"\r\n\t\t});\r\n\r\n\t\t$(\".splash\").each(function () {\r\n\t\t\tvar $this = $(this);\r\n\t\t\tsplashSize = Math.ceil(Math.random() * 10);\r\n\t\t\tsplashSize2 = Math.ceil(Math.random() * 4);\r\n\t\t\tsplashColor = Math.ceil(Math.random() * 6);\r\n\t\t\tsplashPositionX = Math.ceil(Math.random() * 100);\r\n\t\t\tsplashPositionY = Math.ceil(Math.random() * 100);\r\n\r\n\t\t\tif (splashColor === 1) {\r\n\t\t\t\tsplashColor = \"#f00\";\r\n\t\t\t} else if (splashColor === 2) {\r\n\t\t\t\tsplashColor = \"#0f0\";\r\n\t\t\t} else if (splashColor === 3) {\r\n\t\t\t\tsplashColor = \"#00f\";\r\n\t\t\t} else if (splashColor === 4) {\r\n\t\t\t\tsplashColor = \"#ff0\";\r\n\t\t\t} else if (splashColor === 5) {\r\n\t\t\t\tsplashColor = \"#f0f\";\r\n\t\t\t} else {\r\n\t\t\t\tsplashColor = \"#0ff\";\r\n\t\t\t}\r\n\r\n\t\t\t$(this).css({\r\n\t\t\t\t\"width\": splash * splashSize * splashSize2 + \"px\",\r\n\t\t\t\t\"height\": splash * splashSize * splashSize2 + \"px\",\r\n\t\t\t\t\"background\": splashColor,\r\n\t\t\t\t\"left\": splashPositionX + \"%\",\r\n\t\t\t\t\"top\": splashPositionY + \"%\"\r\n\t\t\t});\r\n\r\n\t\t\t$(this).delay(splashSize * 100).fadeTo(500, 0.7, function () {\r\n\t\t\t\t$this.fadeOut(500, function () {\r\n\t\t\t\t\t$this.remove();\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t\tv++;\r\n\t\t});\r\n\t}\r\n\r\n\tsplashMotion();\r\n\r\n\tsetInterval(function () {\r\n\t\tsplashMotion();\r\n\t}, 1900);\r\n});\r\n<\/script><\/pre>\n<style>\r\n\t\t* {\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\t\t\tborder: 0;\r\n\t\t}\r\n\r\n\t\t#main {\r\n\t\t\tposition: relative;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 600px;\r\n\t\t\toverflow: hidden;\r\n\t\t}\r\n\r\n\t\t.splash {\r\n\t\t\tz-index: 0;\r\n\t\t\tborder-radius: 50%;\r\n\t\t}\r\n<\/style><\/pre>\n<div id=\"main\">\r\n<\/div><\/pre>\n