博客网站下雪特效

上班期间也没时间去更新博客，元旦休假的时候就写点内容，分享一段 WordPress 博客网站下雪特效，喜欢的话也可以拿到你的网站去使用。

&lt;</span>script ype<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">&gt;</span>
    <span class="token comment">/* 控制下雪 */</span>
    <span class="token keyword">function</span> <span class="token function">snowFall</span><span class="token punctuation">(</span>snow<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">/* 可配置属性 */</span>
        snow <span class="token operator">=</span> snow <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>maxFlake <span class="token operator">=</span> snow<span class="token punctuation">.</span>maxFlake <span class="token operator">||</span> <span class="token number">200</span><span class="token punctuation">;</span>   <span class="token comment">/* 最多片数 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>flakeSize <span class="token operator">=</span> snow<span class="token punctuation">.</span>flakeSize <span class="token operator">||</span> <span class="token number">10</span><span class="token punctuation">;</span>  <span class="token comment">/* 雪花形状 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>fallSpeed <span class="token operator">=</span> snow<span class="token punctuation">.</span>fallSpeed <span class="token operator">||</span> <span class="token number">1</span><span class="token punctuation">;</span>   <span class="token comment">/* 坠落速度 */</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/* 兼容写法 */</span>
    requestAnimationFrame <span class="token operator">=</span> window<span class="token punctuation">.</span>requestAnimationFrame <span class="token operator">||</span>
        window<span class="token punctuation">.</span>mozRequestAnimationFrame <span class="token operator">||</span>
        window<span class="token punctuation">.</span>webkitRequestAnimationFrame <span class="token operator">||</span>
        window<span class="token punctuation">.</span>msRequestAnimationFrame <span class="token operator">||</span>
        window<span class="token punctuation">.</span>oRequestAnimationFrame <span class="token operator">||</span>
        <span class="token keyword">function</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token number">1000</span> <span class="token operator">/</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

    cancelAnimationFrame <span class="token operator">=</span> window<span class="token punctuation">.</span>cancelAnimationFrame <span class="token operator">||</span>
        window<span class="token punctuation">.</span>mozCancelAnimationFrame <span class="token operator">||</span>
        window<span class="token punctuation">.</span>webkitCancelAnimationFrame <span class="token operator">||</span>
        window<span class="token punctuation">.</span>msCancelAnimationFrame <span class="token operator">||</span>
        window<span class="token punctuation">.</span>oCancelAnimationFrame<span class="token punctuation">;</span>
    <span class="token comment">/* 开始下雪 */</span>
    snowFall<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">start</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">/* 创建画布 */</span>
        snowCanvas<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">/* 创建雪花形状 */</span>
        createFlakes<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">/* 画雪 */</span>
        drawSnow<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/* 创建画布 */</span>
    <span class="token keyword">function</span> <span class="token function">snowCanvas</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">/* 添加 Dom 结点 */</span>
        <span class="token keyword">var</span> snowcanvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"canvas"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        snowcanvas<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">"snowfall"</span><span class="token punctuation">;</span>
        snowcanvas<span class="token punctuation">.</span>width <span class="token operator">=</span> window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">;</span>
        snowcanvas<span class="token punctuation">.</span>height <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight<span class="token punctuation">;</span>
        snowcanvas<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"style"</span><span class="token punctuation">,</span> <span class="token string">"position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"body"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>snowcanvas<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>canvas <span class="token operator">=</span> snowcanvas<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>ctx <span class="token operator">=</span> snowcanvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">"2d"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">/* 窗口大小改变的处理 */</span>
        window<span class="token punctuation">.</span><span class="token function-variable function">onresize</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            snowcanvas<span class="token punctuation">.</span>width <span class="token operator">=</span> window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">;</span>
            <span class="token comment">/* snowcanvas.height = window.innerHeight */</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/* 雪运动对象 */</span>
    <span class="token keyword">function</span> <span class="token function">flakeMove</span><span class="token punctuation">(</span>canvasWidth<span class="token punctuation">,</span> canvasHeight<span class="token punctuation">,</span> flakeSize<span class="token punctuation">,</span> fallSpeed<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> canvasWidth<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">/* x 坐标 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> canvasHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">/* y 坐标 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>size <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> flakeSize <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">;</span>          <span class="token comment">/* 形状 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>maxSize <span class="token operator">=</span> flakeSize<span class="token punctuation">;</span>                           <span class="token comment">/* 最大形状 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>speed <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1</span> <span class="token operator">+</span> fallSpeed<span class="token punctuation">;</span>         <span class="token comment">/* 坠落速度 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>fallSpeed <span class="token operator">=</span> fallSpeed<span class="token punctuation">;</span>                         <span class="token comment">/* 坠落速度 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>velY <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>speed<span class="token punctuation">;</span>                             <span class="token comment">/* Y 方向速度 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>velX <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>                                      <span class="token comment">/* X 方向速度 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>stepSize <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">30</span><span class="token punctuation">;</span>                 <span class="token comment">/* 步长 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>step <span class="token operator">=</span> <span class="token number">0</span>                                       <span class="token comment">/* 步数 */</span>
    <span class="token punctuation">}</span>
    flakeMove<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">update</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token punctuation">,</span>
            y <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y<span class="token punctuation">;</span>
        <span class="token comment">/* 左右摆动(余弦) */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>velX <span class="token operator">*=</span> <span class="token number">0.98</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>velY <span class="token operator">&lt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>speed<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>velY <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>speed <span class="token punctuation">}</span> <span class="token keyword">this</span><span class="token punctuation">.</span>velX <span class="token operator">+=</span> Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>step <span class="token operator">+=</span> <span class="token punctuation">.</span><span class="token number">05</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>stepSize<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">+=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>velY<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">+=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>velX<span class="token punctuation">;</span> <span class="token comment">/* 飞出边界的处理 */</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">&gt;=</span> canvas<span class="token punctuation">.</span>width <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">&lt;=</span> <span class="token number">0</span> <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">&gt;=</span> canvas<span class="token punctuation">.</span>height <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">&lt;=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">reset</span><span class="token punctuation">(</span>canvas<span class="token punctuation">.</span>width<span class="token punctuation">,</span> canvas<span class="token punctuation">.</span>height<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token comment">/* 飞出边界-放置最顶端继续坠落 */</span>
    flakeMove<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">reset</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>width<span class="token punctuation">,</span> height<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> width<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>size <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>maxSize <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>speed <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>fallSpeed<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>velY <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>speed<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>velX <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token comment">// 渲染雪花-随机形状（此处可修改雪花颜色！！！）</span>
    flakeMove<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">render</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>ctx<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> snowFlake <span class="token operator">=</span> ctx<span class="token punctuation">.</span><span class="token function">createRadialGradient</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>size<span class="token punctuation">)</span><span class="token punctuation">;</span>
        snowFlake<span class="token punctuation">.</span><span class="token function">addColorStop</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">"rgba(255, 255, 255, 0.9)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">/* 此处是雪花颜色，默认是白色 */</span>
        snowFlake<span class="token punctuation">.</span><span class="token function">addColorStop</span><span class="token punctuation">(</span><span class="token punctuation">.</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">"rgba(255, 255, 255, 0.5)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* 若要改为其他颜色，请自行查 */</span>
        snowFlake<span class="token punctuation">.</span><span class="token function">addColorStop</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">"rgba(255, 255, 255, 0)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">/* 找 16 进制的 RGB 颜色代码。 */</span>
        ctx<span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> snowFlake<span class="token punctuation">;</span>
        ctx<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        ctx<span class="token punctuation">.</span><span class="token function">arc</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>x<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>y<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>size<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span>PI <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        ctx<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        ctx<span class="token punctuation">.</span><span class="token function">restore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token comment">/* 创建雪花-定义形状 */</span>
    <span class="token keyword">function</span> <span class="token function">createFlakes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> maxFlake <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>maxFlake<span class="token punctuation">,</span>
            flakes <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>flakes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            canvas <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>canvas<span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> maxFlake<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            flakes<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">flakeMove</span><span class="token punctuation">(</span>canvas<span class="token punctuation">.</span>width<span class="token punctuation">,</span> canvas<span class="token punctuation">.</span>height<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>flakeSize<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>fallSpeed<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/* 画雪 */</span>
    <span class="token keyword">function</span> <span class="token function">drawSnow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> maxFlake <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>maxFlake<span class="token punctuation">,</span>
            flakes <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>flakes<span class="token punctuation">;</span>
        ctx <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">,</span> canvas <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>canvas<span class="token punctuation">,</span> that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
        <span class="token comment">/* 清空雪花 */</span>
        ctx<span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> canvas<span class="token punctuation">.</span>width<span class="token punctuation">,</span> canvas<span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> e <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> e <span class="token operator">&lt;</span> maxFlake<span class="token punctuation">;</span> e<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            flakes<span class="token punctuation">[</span>e<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            flakes<span class="token punctuation">[</span>e<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>ctx<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment">/*  一帧一帧的画 */</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>loop <span class="token operator">=</span> <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            drawSnow<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>that<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">/* 调用及控制方法 */</span>
    <span class="token keyword">var</span> snow <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">snowFall</span><span class="token punctuation">(</span><span class="token punctuation">{</span>maxFlake<span class="token punctuation">:</span><span class="token number">60</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    snow<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;

使用方法：

方法①：复制其中一种 JS 代码，粘贴到网站</body>标签之前即可；

方法②：去掉代码前后的<script>标签，然后将代码保存为 js 文件，最后在网站引用即可。

Ps：若没效果，请确认网页是否已载入 JQurey，如果没有请在下雪代码之前引入 JQ 即可。

载入 JQuery，载入的百度提供的库

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>