{"id":223,"date":"2017-01-13T13:28:57","date_gmt":"2017-01-13T05:28:57","guid":{"rendered":"http:\/\/43.142.23.169\/wp\/?p=223"},"modified":"2017-01-13T13:28:57","modified_gmt":"2017-01-13T05:28:57","slug":"xuehuajs","status":"publish","type":"post","link":"https:\/\/blog.240996.xyz\/index.php\/2017\/01\/13\/xuehuajs\/","title":{"rendered":"\u96ea\u82b1\u7279\u6548JS\u4ee3\u7801(\u7f51\u7ad9\u4e0b\u96ea\u6548\u679c)"},"content":{"rendered":"

\u672c\u6587\u7cfb\u8f6c\u8f7d
\n\u4f5c\u8005\uff1a\u5c0f\u5929\u874e
\n\u94fe\u63a5\uff1ahttps:\/\/www.ilovetoo.cc\/xuehua\/<\/p>\n

\u7279\u6548\u4ee3\u7801\u4e00\uff1a<\/h3>\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span>\n(function<\/span>($<\/span>)<\/span>{\n\t$.fn.snow = function<\/span>(options<\/span>)<\/span>{\n\tvar<\/span> $flake = $('<div id=\"snowbox\" \/>'<\/span>).css({'position'<\/span>: 'absolute'<\/span>,'z-index'<\/span>:'9999'<\/span>, 'top'<\/span>: '-50px'<\/span>}).html('&#10052;'<\/span>),\n\tdocumentHeight \t= $(document<\/span>).height(),\n\tdocumentWidth\t= $(document<\/span>).width(),\n\tdefaults = {\n\t\tminSize\t\t: 10<\/span>,\n\t\tmaxSize\t\t: 20<\/span>,\n\t\tnewOn\t\t: 1000<\/span>,\n\t\tflakeColor\t: \"#AFDAEF\"<\/span> \/* \u6b64\u5904\u53ef\u4ee5\u5b9a\u4e49\u96ea\u82b1\u989c\u8272\uff0c\u82e5\u8981\u767d\u8272\u53ef\u4ee5\u6539\u4e3a#FFFFFF *\/<\/span>\n\t},\n\toptions\t= $.extend({}, defaults, options);\n\tvar<\/span> interval= setInterval( function<\/span>()<\/span>{\n\tvar<\/span> startPositionLeft = Math<\/span>.random() * documentWidth - 100<\/span>,\n\tstartOpacity = 0.5<\/span> + Math<\/span>.random(),\n\tsizeFlake = options.minSize + Math<\/span>.random() * options.maxSize,\n\tendPositionTop = documentHeight - 200<\/span>,\n\tendPositionLeft = startPositionLeft - 500<\/span> + Math<\/span>.random() * 500<\/span>,\n\tdurationFall = documentHeight * 10<\/span> + Math<\/span>.random() * 5000<\/span>;\n\t$flake.clone().appendTo('body'<\/span>).css({\n\t\tleft: startPositionLeft,\n\t\topacity: startOpacity,\n\t\t'font-size'<\/span>: sizeFlake,\n\t\tcolor: options.flakeColor\n\t}).animate({\n\t\ttop: endPositionTop,\n\t\tleft: endPositionLeft,\n\t\topacity: 0.2<\/span>\n\t},durationFall,'linear'<\/span>,function<\/span>()<\/span>{\n\t\t$(this<\/span>).remove()\n\t});\n\t}, options.newOn);\n    };\n})(jQuery);\n$(function<\/span>()<\/span>{\n    $.fn.snow({ \n\t    minSize: 5<\/span>, \/* \u5b9a\u4e49\u96ea\u82b1\u6700\u5c0f\u5c3a\u5bf8 *\/<\/span>\n\t    maxSize: 50<\/span>,\/* \u5b9a\u4e49\u96ea\u82b1\u6700\u5927\u5c3a\u5bf8 *\/<\/span>\n\t    newOn: 300<\/span>  \/* \u5b9a\u4e49\u5bc6\u96c6\u7a0b\u5ea6\uff0c\u6570\u5b57\u8d8a\u5c0f\u8d8a\u5bc6\u96c6 *\/<\/span>\n    });\n});\n<\/span><\/script<\/span>>\n\n<\/span><\/code><\/pre>\n
<\/p>\n
\u7279\u6548\u4ee3\u7801\u4e8c\uff1a<\/h3>\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span>\n    \/* \u63a7\u5236\u4e0b\u96ea *\/<\/span>\n    function<\/span> snowFall<\/span>(snow<\/span>) <\/span>{\n        \/* \u53ef\u914d\u7f6e\u5c5e\u6027 *\/<\/span>\n        snow = snow || {};\n        this<\/span>.maxFlake = snow.maxFlake || 200<\/span>;   \/* \u6700\u591a\u7247\u6570 *\/<\/span>\n        this<\/span>.flakeSize = snow.flakeSize || 10<\/span>;  \/* \u96ea\u82b1\u5f62\u72b6 *\/<\/span>\n        this<\/span>.fallSpeed = snow.fallSpeed || 1<\/span>;   \/* \u5760\u843d\u901f\u5ea6 *\/<\/span>\n    }\n    \/* \u517c\u5bb9\u5199\u6cd5 *\/<\/span>\n    requestAnimationFrame = window<\/span>.requestAnimationFrame ||\n        window<\/span>.mozRequestAnimationFrame ||\n        window<\/span>.webkitRequestAnimationFrame ||\n        window<\/span>.msRequestAnimationFrame ||\n        window<\/span>.oRequestAnimationFrame ||\n        function<\/span>(callback<\/span>) <\/span>{ setTimeout(callback, 1000<\/span> \/ 60<\/span>); };\n \n    cancelAnimationFrame = window<\/span>.cancelAnimationFrame ||\n        window<\/span>.mozCancelAnimationFrame ||\n        window<\/span>.webkitCancelAnimationFrame ||\n        window<\/span>.msCancelAnimationFrame ||\n        window<\/span>.oCancelAnimationFrame;\n    \/* \u5f00\u59cb\u4e0b\u96ea *\/<\/span>\n    snowFall.prototype.start = function<\/span>()<\/span>{\n        \/* \u521b\u5efa\u753b\u5e03 *\/<\/span>\n        snowCanvas.apply(this<\/span>);\n        \/* \u521b\u5efa\u96ea\u82b1\u5f62\u72b6 *\/<\/span>\n        createFlakes.apply(this<\/span>);\n        \/* \u753b\u96ea *\/<\/span>\n        drawSnow.apply(this<\/span>)\n    }\n    \/* \u521b\u5efa\u753b\u5e03 *\/<\/span>\n    function<\/span> snowCanvas<\/span>() <\/span>{\n        \/* \u6dfb\u52a0Dom\u7ed3\u70b9 *\/<\/span>\n        var<\/span> snowcanvas = document<\/span>.createElement(\"canvas\"<\/span>);\n        snowcanvas.id = \"snowfall\"<\/span>;\n        snowcanvas.width = window<\/span>.innerWidth;\n        snowcanvas.height = document<\/span>.body.clientHeight;\n        snowcanvas.setAttribute(\"style\"<\/span>, \"position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;\"<\/span>);\n        document<\/span>.getElementsByTagName(\"body\"<\/span>)[0<\/span>].appendChild(snowcanvas);\n        this<\/span>.canvas = snowcanvas;\n        this<\/span>.ctx = snowcanvas.getContext(\"2d\"<\/span>);\n        \/* \u7a97\u53e3\u5927\u5c0f\u6539\u53d8\u7684\u5904\u7406 *\/<\/span>\n        window<\/span>.onresize = function<\/span>() <\/span>{\n            snowcanvas.width = window<\/span>.innerWidth;\n            \/* snowcanvas.height = window.innerHeight *\/<\/span>\n        }\n    }\n    \/* \u96ea\u8fd0\u52a8\u5bf9\u8c61 *\/<\/span>\n    function<\/span> flakeMove<\/span>(canvasWidth, canvasHeight, flakeSize, fallSpeed<\/span>) <\/span>{\n        this<\/span>.x = Math<\/span>.floor(Math<\/span>.random() * canvasWidth);   \/* x\u5750\u6807 *\/<\/span>\n        this<\/span>.y = Math<\/span>.floor(Math<\/span>.random() * canvasHeight);  \/* y\u5750\u6807 *\/<\/span>\n        this<\/span>.size = Math<\/span>.random() * flakeSize + 2<\/span>;          \/* \u5f62\u72b6 *\/<\/span>\n        this<\/span>.maxSize = flakeSize;                           \/* \u6700\u5927\u5f62\u72b6 *\/<\/span>\n        this<\/span>.speed = Math<\/span>.random() * 1<\/span> + fallSpeed;         \/* \u5760\u843d\u901f\u5ea6 *\/<\/span>\n        this<\/span>.fallSpeed = fallSpeed;                         \/* \u5760\u843d\u901f\u5ea6 *\/<\/span>\n        this<\/span>.velY = this<\/span>.speed;                             \/* Y\u65b9\u5411\u901f\u5ea6 *\/<\/span>\n        this<\/span>.velX = 0<\/span>;                                      \/* X\u65b9\u5411\u901f\u5ea6 *\/<\/span>\n        this<\/span>.stepSize = Math<\/span>.random() \/ 30<\/span>;                 \/* \u6b65\u957f *\/<\/span>\n        this<\/span>.step = 0<\/span>                                       \/* \u6b65\u6570 *\/<\/span>\n    }\n    flakeMove.prototype.update = function<\/span>() <\/span>{\n        var<\/span> x = this<\/span>.x,\n            y = this<\/span>.y;\n        \/* \u5de6\u53f3\u6446\u52a8(\u4f59\u5f26) *\/<\/span>\n        this<\/span>.velX *= 0.98<\/span>;\n        if<\/span> (this<\/span>.velY <= this<\/span>.speed) {\n            this<\/span>.velY = this<\/span>.speed\n        }\n        this<\/span>.velX += Math<\/span>.cos(this<\/span>.step += .05<\/span>) * this<\/span>.stepSize;\n \n        this<\/span>.y += this<\/span>.velY;\n        this<\/span>.x += this<\/span>.velX;\n        \/* \u98de\u51fa\u8fb9\u754c\u7684\u5904\u7406 *\/<\/span>\n        if<\/span> (this<\/span>.x >= canvas.width || this<\/span>.x <= 0<\/span> || this<\/span>.y >= canvas.height || this<\/span>.y <= 0<\/span>) {\n            this<\/span>.reset(canvas.width, canvas.height)\n        }\n    };\n    \/* \u98de\u51fa\u8fb9\u754c-\u653e\u7f6e\u6700\u9876\u7aef\u7ee7\u7eed\u5760\u843d *\/<\/span>\n    flakeMove.prototype.reset = function<\/span>(width, height<\/span>) <\/span>{\n        this<\/span>.x = Math<\/span>.floor(Math<\/span>.random() * width);\n        this<\/span>.y = 0<\/span>;\n        this<\/span>.size = Math<\/span>.random() * this<\/span>.maxSize + 2<\/span>;\n        this<\/span>.speed = Math<\/span>.random() * 1<\/span> + this<\/span>.fallSpeed;\n        this<\/span>.velY = this<\/span>.speed;\n        this<\/span>.velX = 0<\/span>;\n    };\n    \/\/ \u6e32\u67d3\u96ea\u82b1-\u968f\u673a\u5f62\u72b6\uff08\u6b64\u5904\u53ef\u4fee\u6539\u96ea\u82b1\u989c\u8272\uff01\uff01\uff01\uff09<\/span>\n    flakeMove.prototype.render = function<\/span>(ctx<\/span>) <\/span>{\n        var<\/span> snowFlake = ctx.createRadialGradient(this<\/span>.x, this<\/span>.y, 0<\/span>, this<\/span>.x, this<\/span>.y, this<\/span>.size);\n        snowFlake.addColorStop(0<\/span>, \"rgba(255, 255, 255, 0.9)\"<\/span>);  \/* \u6b64\u5904\u662f\u96ea\u82b1\u989c\u8272\uff0c\u9ed8\u8ba4\u662f\u767d\u8272 *\/<\/span>\n        snowFlake.addColorStop(.5<\/span>, \"rgba(255, 255, 255, 0.5)\"<\/span>); \/* \u82e5\u8981\u6539\u4e3a\u5176\u4ed6\u989c\u8272\uff0c\u8bf7\u81ea\u884c\u67e5 *\/<\/span>\n        snowFlake.addColorStop(1<\/span>, \"rgba(255, 255, 255, 0)\"<\/span>);    \/* \u627e16\u8fdb\u5236\u7684RGB \u989c\u8272\u4ee3\u7801\u3002 *\/<\/span>\n        ctx.save();\n        ctx.fillStyle = snowFlake;\n        ctx.beginPath();\n        ctx.arc(this<\/span>.x, this<\/span>.y, this<\/span>.size, 0<\/span>, Math<\/span>.PI * 2<\/span>);\n        ctx.fill();\n        ctx.restore();\n    };\n    \/* \u521b\u5efa\u96ea\u82b1-\u5b9a\u4e49\u5f62\u72b6 *\/<\/span>\n    function<\/span> createFlakes<\/span>() <\/span>{\n        var<\/span> maxFlake = this<\/span>.maxFlake,\n            flakes = this<\/span>.flakes = [],\n            canvas = this<\/span>.canvas;\n        for<\/span> (var<\/span> i = 0<\/span>; i < maxFlake; i++) {\n            flakes.push(new<\/span> flakeMove(canvas.width, canvas.height, this<\/span>.flakeSize, this<\/span>.fallSpeed))\n        }\n    }\n    \/* \u753b\u96ea *\/<\/span>\n    function<\/span> drawSnow<\/span>() <\/span>{\n        var<\/span> maxFlake = this<\/span>.maxFlake,\n            flakes = this<\/span>.flakes;\n        ctx = this<\/span>.ctx, canvas = this<\/span>.canvas, that = this<\/span>;\n        \/* \u6e05\u7a7a\u96ea\u82b1 *\/<\/span>\n        ctx.clearRect(0<\/span>, 0<\/span>, canvas.width, canvas.height);\n        for<\/span> (var<\/span> e = 0<\/span>; e < maxFlake; e++) {\n            flakes[e].update();\n            flakes[e].render(ctx);\n        }\n        \/*  \u4e00\u5e27\u4e00\u5e27\u7684\u753b *\/<\/span>\n        this<\/span>.loop = requestAnimationFrame(function<\/span>() <\/span>{\n            drawSnow.apply(that);\n        });\n    }\n    \/* \u8c03\u7528\u53ca\u63a7\u5236\u65b9\u6cd5 *\/<\/span>\n    var<\/span> snow = new<\/span> snowFall({maxFlake:500<\/span>});\n    snow.start();\n<\/span><\/script<\/span>>\n\n<\/span><\/code><\/pre>\n
\u4f7f\u7528\u65b9\u6cd5\uff1a<\/p>\n
\u65b9\u6cd5\u2460\u3001\u590d\u5236\u5176\u4e2d\u4e00\u79cdJS\u4ee3\u7801\uff0c\u7c98\u8d34\u5230\u7f51\u7ad9<\/body>\u6807\u7b7e\u4e4b\u524d\u5373\u53ef\uff1b<\/p>\n
\u65b9\u6cd5\u2461\u3001\u53bb\u6389\u4ee3\u7801\u524d\u540e\u7684<script **>\u6807\u7b7e\uff0c\u7136\u540e\u5c06\u4ee3\u7801\u4fdd\u5b58\u4e3ajs\u6587\u4ef6\uff0c\u6700\u540e\u5728\u7f51\u7ad9\u5f15\u7528\u5373\u53ef\u3002<\/p>\n
Ps\uff1a\u82e5\u6ca1\u6548\u679c\uff0c\u8bf7\u786e\u8ba4\u7f51\u9875\u662f\u5426\u5df2\u8f7d\u5165JQurey\uff0c\u5982\u679c\u6ca1\u6709\u8bf7\u5728\u4e0b\u96ea\u4ee3\u7801\u4e4b\u524d\u5f15\u5165JQ\u5373\u53ef\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u672c\u6587\u7cfb\u8f6c\u8f7d \u4f5c\u8005\uff1a\u5c0f\u5929\u874e \u94fe\u63a5\uff1ahttps:\/\/www.ilovetoo.cc\/xuehua\/ \u7279\u6548\u4ee3\u7801\u4e00\uff1a  […]<\/p>\n","protected":false},"author":1,"featured_media":600,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[13,14],"class_list":["post-223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-exp","tag-texiao","tag-xuehua"],"_links":{"self":[{"href":"https:\/\/blog.240996.xyz\/index.php\/wp-json\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.240996.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.240996.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.240996.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.240996.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":0,"href":"https:\/\/blog.240996.xyz\/index.php\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.240996.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.240996.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.240996.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}