Single

分享两种wordpress网站下雪效果

发现平时没事去逛逛别人的博客还是挺有收获的,今天学到了两种wordpress网站下雪的效果,就迫不及待的自己使用了一个,真的写的不错,由于我的主题颜色原因,效果取消了,有喜欢的可以自己尝试一下,绝对的干货。
看代码之前,先分享一下即时预览的方法:很简单,在webkit浏览器(比如谷歌)按下F12,然后在console里面粘贴一下JS代码(不含前后的script标签),然后回车执行即可看到效果了。

一、下雪特效代码①

<span class="tag"><script</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span>
<span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">$</span><span class="pun">){</span><span class="pln">
	$</span><span class="pun">.</span><span class="pln">fn</span><span class="pun">.</span><span class="pln">snow </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">options</span><span class="pun">){</span>
	<span class="kwd">var</span><span class="pln"> $flake </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'<div id="snowbox" />'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="str">'position'</span><span class="pun">:</span> <span class="str">'absolute'</span><span class="pun">,</span><span class="str">'z-index'</span><span class="pun">:</span><span class="str">'9999'</span><span class="pun">,</span> <span class="str">'top'</span><span class="pun">:</span> <span class="str">'-50px'</span><span class="pun">}).</span><span class="pln">html</span><span class="pun">(</span><span class="str">'❄'</span><span class="pun">),</span><span class="pln">
	documentHeight 	</span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">height</span><span class="pun">(),</span><span class="pln">
	documentWidth	</span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">width</span><span class="pun">(),</span><span class="pln">
	defaults </span><span class="pun">=</span> <span class="pun">{</span><span class="pln">
		minSize		</span><span class="pun">:</span> <span class="lit">10</span><span class="pun">,</span><span class="pln">
		maxSize		</span><span class="pun">:</span> <span class="lit">20</span><span class="pun">,</span><span class="pln">
		newOn		</span><span class="pun">:</span> <span class="lit">1000</span><span class="pun">,</span><span class="pln">
		flakeColor	</span><span class="pun">:</span> <span class="str">"#AFDAEF"</span> <span class="com">/* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */</span>
	<span class="pun">},</span><span class="pln">
	options	</span><span class="pun">=</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">extend</span><span class="pun">({},</span><span class="pln"> defaults</span><span class="pun">,</span><span class="pln"> options</span><span class="pun">);</span>
	<span class="kwd">var</span><span class="pln"> interval</span><span class="pun">=</span><span class="pln"> setInterval</span><span class="pun">(</span> <span class="kwd">function</span><span class="pun">(){</span>
	<span class="kwd">var</span><span class="pln"> startPositionLeft </span><span class="pun">=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span><span class="pln"> documentWidth </span><span class="pun">-</span> <span class="lit">100</span><span class="pun">,</span><span class="pln">
	startOpacity </span><span class="pun">=</span> <span class="lit">0.5</span> <span class="pun">+</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">(),</span><span class="pln">
	sizeFlake </span><span class="pun">=</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">minSize </span><span class="pun">+</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">maxSize</span><span class="pun">,</span><span class="pln">
	endPositionTop </span><span class="pun">=</span><span class="pln"> documentHeight </span><span class="pun">-</span> <span class="lit">200</span><span class="pun">,</span><span class="pln">
	endPositionLeft </span><span class="pun">=</span><span class="pln"> startPositionLeft </span><span class="pun">-</span> <span class="lit">500</span> <span class="pun">+</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span> <span class="lit">500</span><span class="pun">,</span><span class="pln">
	durationFall </span><span class="pun">=</span><span class="pln"> documentHeight </span><span class="pun">*</span> <span class="lit">10</span> <span class="pun">+</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span> <span class="lit">5000</span><span class="pun">;</span><span class="pln">
	$flake</span><span class="pun">.</span><span class="pln">clone</span><span class="pun">().</span><span class="pln">appendTo</span><span class="pun">(</span><span class="str">'body'</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln">
		left</span><span class="pun">:</span><span class="pln"> startPositionLeft</span><span class="pun">,</span><span class="pln">
		opacity</span><span class="pun">:</span><span class="pln"> startOpacity</span><span class="pun">,</span>
		<span class="str">'font-size'</span><span class="pun">:</span><span class="pln"> sizeFlake</span><span class="pun">,</span><span class="pln">
		color</span><span class="pun">:</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">flakeColor
	</span><span class="pun">}).</span><span class="pln">animate</span><span class="pun">({</span><span class="pln">
		top</span><span class="pun">:</span><span class="pln"> endPositionTop</span><span class="pun">,</span><span class="pln">
		left</span><span class="pun">:</span><span class="pln"> endPositionLeft</span><span class="pun">,</span><span class="pln">
		opacity</span><span class="pun">:</span> <span class="lit">0.2</span>
	<span class="pun">},</span><span class="pln">durationFall</span><span class="pun">,</span><span class="str">'linear'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
		$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">remove</span><span class="pun">()</span>
	<span class="pun">});</span>
	<span class="pun">},</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">newOn</span><span class="pun">);</span>
    <span class="pun">};</span>
<span class="pun">})(</span><span class="pln">jQuery</span><span class="pun">);</span><span class="pln">
$</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
    $</span><span class="pun">.</span><span class="pln">fn</span><span class="pun">.</span><span class="pln">snow</span><span class="pun">({</span><span class="pln"> 
	    minSize</span><span class="pun">:</span> <span class="lit">5</span><span class="pun">,</span> <span class="com">/* 定义雪花最小尺寸 */</span><span class="pln">
	    maxSize</span><span class="pun">:</span> <span class="lit">50</span><span class="pun">,</span><span class="com">/* 定义雪花最大尺寸 */</span><span class="pln">
	    newOn</span><span class="pun">:</span> <span class="lit">300</span>  <span class="com">/* 定义密集程度,数字越小越密集 */</span>
    <span class="pun">});</span>
<span class="pun">});</span>
<span class="tag"></script>
</span>

二、下雪特效代码②

<span class="tag"><script</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span>
    <span class="com">/* 控制下雪 */</span>
    <span class="kwd">function</span><span class="pln"> snowFall</span><span class="pun">(</span><span class="pln">snow</span><span class="pun">)</span> <span class="pun">{</span>
        <span class="com">/* 可配置属性 */</span><span class="pln">
        snow </span><span class="pun">=</span><span class="pln"> snow </span><span class="pun">||</span> <span class="pun">{};</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">maxFlake </span><span class="pun">=</span><span class="pln"> snow</span><span class="pun">.</span><span class="pln">maxFlake </span><span class="pun">||</span> <span class="lit">200</span><span class="pun">;</span>   <span class="com">/* 最多片数 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">flakeSize </span><span class="pun">=</span><span class="pln"> snow</span><span class="pun">.</span><span class="pln">flakeSize </span><span class="pun">||</span> <span class="lit">10</span><span class="pun">;</span>  <span class="com">/* 雪花形状 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">fallSpeed </span><span class="pun">=</span><span class="pln"> snow</span><span class="pun">.</span><span class="pln">fallSpeed </span><span class="pun">||</span> <span class="lit">1</span><span class="pun">;</span>   <span class="com">/* 坠落速度 */</span>
    <span class="pun">}</span>
    <span class="com">/* 兼容写法 */</span><span class="pln">
    requestAnimationFrame </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">requestAnimationFrame </span><span class="pun">||</span><span class="pln">
        window</span><span class="pun">.</span><span class="pln">mozRequestAnimationFrame </span><span class="pun">||</span><span class="pln">
        window</span><span class="pun">.</span><span class="pln">webkitRequestAnimationFrame </span><span class="pun">||</span><span class="pln">
        window</span><span class="pun">.</span><span class="pln">msRequestAnimationFrame </span><span class="pun">||</span><span class="pln">
        window</span><span class="pun">.</span><span class="pln">oRequestAnimationFrame </span><span class="pun">||</span>
        <span class="kwd">function</span><span class="pun">(</span><span class="pln">callback</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> setTimeout</span><span class="pun">(</span><span class="pln">callback</span><span class="pun">,</span> <span class="lit">1000</span> <span class="pun">/</span> <span class="lit">60</span><span class="pun">);</span> <span class="pun">};</span><span class="pln">

    cancelAnimationFrame </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">cancelAnimationFrame </span><span class="pun">||</span><span class="pln">
        window</span><span class="pun">.</span><span class="pln">mozCancelAnimationFrame </span><span class="pun">||</span><span class="pln">
        window</span><span class="pun">.</span><span class="pln">webkitCancelAnimationFrame </span><span class="pun">||</span><span class="pln">
        window</span><span class="pun">.</span><span class="pln">msCancelAnimationFrame </span><span class="pun">||</span><span class="pln">
        window</span><span class="pun">.</span><span class="pln">oCancelAnimationFrame</span><span class="pun">;</span>
    <span class="com">/* 开始下雪 */</span><span class="pln">
    snowFall</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">start </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(){</span>
        <span class="com">/* 创建画布 */</span><span class="pln">
        snowCanvas</span><span class="pun">.</span><span class="pln">apply</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">);</span>
        <span class="com">/* 创建雪花形状 */</span><span class="pln">
        createFlakes</span><span class="pun">.</span><span class="pln">apply</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">);</span>
        <span class="com">/* 画雪 */</span><span class="pln">
        drawSnow</span><span class="pun">.</span><span class="pln">apply</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">)</span>
    <span class="pun">}</span>
    <span class="com">/* 创建画布 */</span>
    <span class="kwd">function</span><span class="pln"> snowCanvas</span><span class="pun">()</span> <span class="pun">{</span>
        <span class="com">/* 添加Dom结点 */</span>
        <span class="kwd">var</span><span class="pln"> snowcanvas </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">"canvas"</span><span class="pun">);</span><span class="pln">
        snowcanvas</span><span class="pun">.</span><span class="pln">id </span><span class="pun">=</span> <span class="str">"snowfall"</span><span class="pun">;</span><span class="pln">
        snowcanvas</span><span class="pun">.</span><span class="pln">width </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">innerWidth</span><span class="pun">;</span><span class="pln">
        snowcanvas</span><span class="pun">.</span><span class="pln">height </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">clientHeight</span><span class="pun">;</span><span class="pln">
        snowcanvas</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"style"</span><span class="pun">,</span> <span class="str">"position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;"</span><span class="pun">);</span><span class="pln">
        document</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">"body"</span><span class="pun">)[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">snowcanvas</span><span class="pun">);</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">canvas </span><span class="pun">=</span><span class="pln"> snowcanvas</span><span class="pun">;</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">ctx </span><span class="pun">=</span><span class="pln"> snowcanvas</span><span class="pun">.</span><span class="pln">getContext</span><span class="pun">(</span><span class="str">"2d"</span><span class="pun">);</span>
        <span class="com">/* 窗口大小改变的处理 */</span><span class="pln">
        window</span><span class="pun">.</span><span class="pln">onresize </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
            snowcanvas</span><span class="pun">.</span><span class="pln">width </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">innerWidth</span><span class="pun">;</span>
            <span class="com">/* snowcanvas.height = window.innerHeight */</span>
        <span class="pun">}</span>
    <span class="pun">}</span>
    <span class="com">/* 雪运动对象 */</span>
    <span class="kwd">function</span><span class="pln"> flakeMove</span><span class="pun">(</span><span class="pln">canvasWidth</span><span class="pun">,</span><span class="pln"> canvasHeight</span><span class="pun">,</span><span class="pln"> flakeSize</span><span class="pun">,</span><span class="pln"> fallSpeed</span><span class="pun">)</span> <span class="pun">{</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">x </span><span class="pun">=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span><span class="pln"> canvasWidth</span><span class="pun">);</span>   <span class="com">/* x坐标 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">y </span><span class="pun">=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span><span class="pln"> canvasHeight</span><span class="pun">);</span>  <span class="com">/* y坐标 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">size </span><span class="pun">=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span><span class="pln"> flakeSize </span><span class="pun">+</span> <span class="lit">2</span><span class="pun">;</span>          <span class="com">/* 形状 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">maxSize </span><span class="pun">=</span><span class="pln"> flakeSize</span><span class="pun">;</span>                           <span class="com">/* 最大形状 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">speed </span><span class="pun">=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span> <span class="lit">1</span> <span class="pun">+</span><span class="pln"> fallSpeed</span><span class="pun">;</span>         <span class="com">/* 坠落速度 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">fallSpeed </span><span class="pun">=</span><span class="pln"> fallSpeed</span><span class="pun">;</span>                         <span class="com">/* 坠落速度 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">velY </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">speed</span><span class="pun">;</span>                             <span class="com">/* Y方向速度 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">velX </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span>                                      <span class="com">/* X方向速度 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">stepSize </span><span class="pun">=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">/</span> <span class="lit">30</span><span class="pun">;</span>                 <span class="com">/* 步长 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">step </span><span class="pun">=</span> <span class="lit">0</span>                                       <span class="com">/* 步数 */</span>
    <span class="pun">}</span><span class="pln">
    flakeMove</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">update </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span>
        <span class="kwd">var</span><span class="pln"> x </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">x</span><span class="pun">,</span><span class="pln">
            y </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">y</span><span class="pun">;</span>
        <span class="com">/* 左右摆动(余弦) */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">velX </span><span class="pun">*=</span> <span class="lit">0.98</span><span class="pun">;</span>
        <span class="kwd">if</span> <span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">velY </span><span class="pun"><=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">speed</span><span class="pun">)</span> <span class="pun">{</span>
            <span class="kwd">this</span><span class="pun">.</span><span class="pln">velY </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">speed
        </span><span class="pun">}</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">velX </span><span class="pun">+=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">cos</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">step </span><span class="pun">+=</span> <span class="pun">.</span><span class="lit">05</span><span class="pun">)</span> <span class="pun">*</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">stepSize</span><span class="pun">;</span>

        <span class="kwd">this</span><span class="pun">.</span><span class="pln">y </span><span class="pun">+=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">velY</span><span class="pun">;</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">x </span><span class="pun">+=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">velX</span><span class="pun">;</span>
        <span class="com">/* 飞出边界的处理 */</span>
        <span class="kwd">if</span> <span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">x </span><span class="pun">>=</span><span class="pln"> canvas</span><span class="pun">.</span><span class="pln">width </span><span class="pun">||</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">x </span><span class="pun"><=</span> <span class="lit">0</span> <span class="pun">||</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">y </span><span class="pun">>=</span><span class="pln"> canvas</span><span class="pun">.</span><span class="pln">height </span><span class="pun">||</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">y </span><span class="pun"><=</span> <span class="lit">0</span><span class="pun">)</span> <span class="pun">{</span>
            <span class="kwd">this</span><span class="pun">.</span><span class="pln">reset</span><span class="pun">(</span><span class="pln">canvas</span><span class="pun">.</span><span class="pln">width</span><span class="pun">,</span><span class="pln"> canvas</span><span class="pun">.</span><span class="pln">height</span><span class="pun">)</span>
        <span class="pun">}</span>
    <span class="pun">};</span>
    <span class="com">/* 飞出边界-放置最顶端继续坠落 */</span><span class="pln">
    flakeMove</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">reset </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">width</span><span class="pun">,</span><span class="pln"> height</span><span class="pun">)</span> <span class="pun">{</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">x </span><span class="pun">=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span><span class="pln"> width</span><span class="pun">);</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">y </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">size </span><span class="pun">=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">maxSize </span><span class="pun">+</span> <span class="lit">2</span><span class="pun">;</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">speed </span><span class="pun">=</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span> <span class="pun">*</span> <span class="lit">1</span> <span class="pun">+</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">fallSpeed</span><span class="pun">;</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">velY </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">speed</span><span class="pun">;</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">velX </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span>
    <span class="pun">};</span>
    <span class="com">// 渲染雪花-随机形状(此处可修改雪花颜色!!!)</span><span class="pln">
    flakeMove</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">render </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">ctx</span><span class="pun">)</span> <span class="pun">{</span>
        <span class="kwd">var</span><span class="pln"> snowFlake </span><span class="pun">=</span><span class="pln"> ctx</span><span class="pun">.</span><span class="pln">createRadialGradient</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">x</span><span class="pun">,</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">y</span><span class="pun">,</span> <span class="lit">0</span><span class="pun">,</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">x</span><span class="pun">,</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">y</span><span class="pun">,</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">size</span><span class="pun">);</span><span class="pln">
        snowFlake</span><span class="pun">.</span><span class="pln">addColorStop</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span> <span class="str">"rgba(255, 255, 255, 0.9)"</span><span class="pun">);</span>  <span class="com">/* 此处是雪花颜色,默认是白色 */</span><span class="pln">
        snowFlake</span><span class="pun">.</span><span class="pln">addColorStop</span><span class="pun">(.</span><span class="lit">5</span><span class="pun">,</span> <span class="str">"rgba(255, 255, 255, 0.5)"</span><span class="pun">);</span> <span class="com">/* 若要改为其他颜色,请自行查 */</span><span class="pln">
        snowFlake</span><span class="pun">.</span><span class="pln">addColorStop</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span> <span class="str">"rgba(255, 255, 255, 0)"</span><span class="pun">);</span>    <span class="com">/* 找16进制的RGB 颜色代码。 */</span><span class="pln">
        ctx</span><span class="pun">.</span><span class="pln">save</span><span class="pun">();</span><span class="pln">
        ctx</span><span class="pun">.</span><span class="pln">fillStyle </span><span class="pun">=</span><span class="pln"> snowFlake</span><span class="pun">;</span><span class="pln">
        ctx</span><span class="pun">.</span><span class="pln">beginPath</span><span class="pun">();</span><span class="pln">
        ctx</span><span class="pun">.</span><span class="pln">arc</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">x</span><span class="pun">,</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">y</span><span class="pun">,</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">size</span><span class="pun">,</span> <span class="lit">0</span><span class="pun">,</span> <span class="typ">Math</span><span class="pun">.</span><span class="pln">PI </span><span class="pun">*</span> <span class="lit">2</span><span class="pun">);</span><span class="pln">
        ctx</span><span class="pun">.</span><span class="pln">fill</span><span class="pun">();</span><span class="pln">
        ctx</span><span class="pun">.</span><span class="pln">restore</span><span class="pun">();</span>
    <span class="pun">};</span>
    <span class="com">/* 创建雪花-定义形状 */</span>
    <span class="kwd">function</span><span class="pln"> createFlakes</span><span class="pun">()</span> <span class="pun">{</span>
        <span class="kwd">var</span><span class="pln"> maxFlake </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">maxFlake</span><span class="pun">,</span><span class="pln">
            flakes </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">flakes </span><span class="pun">=</span> <span class="pun">[],</span><span class="pln">
            canvas </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">canvas</span><span class="pun">;</span>
        <span class="kwd">for</span> <span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> maxFlake</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span> <span class="pun">{</span><span class="pln">
            flakes</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> flakeMove</span><span class="pun">(</span><span class="pln">canvas</span><span class="pun">.</span><span class="pln">width</span><span class="pun">,</span><span class="pln"> canvas</span><span class="pun">.</span><span class="pln">height</span><span class="pun">,</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">flakeSize</span><span class="pun">,</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">fallSpeed</span><span class="pun">))</span>
        <span class="pun">}</span>
    <span class="pun">}</span>
    <span class="com">/* 画雪 */</span>
    <span class="kwd">function</span><span class="pln"> drawSnow</span><span class="pun">()</span> <span class="pun">{</span>
        <span class="kwd">var</span><span class="pln"> maxFlake </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">maxFlake</span><span class="pun">,</span><span class="pln">
            flakes </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">flakes</span><span class="pun">;</span><span class="pln">
        ctx </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">ctx</span><span class="pun">,</span><span class="pln"> canvas </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">canvas</span><span class="pun">,</span><span class="pln"> that </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">;</span>
        <span class="com">/* 清空雪花 */</span><span class="pln">
        ctx</span><span class="pun">.</span><span class="pln">clearRect</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span> <span class="lit">0</span><span class="pun">,</span><span class="pln"> canvas</span><span class="pun">.</span><span class="pln">width</span><span class="pun">,</span><span class="pln"> canvas</span><span class="pun">.</span><span class="pln">height</span><span class="pun">);</span>
        <span class="kwd">for</span> <span class="pun">(</span><span class="kwd">var</span><span class="pln"> e </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> e </span><span class="pun"><</span><span class="pln"> maxFlake</span><span class="pun">;</span><span class="pln"> e</span><span class="pun">++)</span> <span class="pun">{</span><span class="pln">
            flakes</span><span class="pun">[</span><span class="pln">e</span><span class="pun">].</span><span class="pln">update</span><span class="pun">();</span><span class="pln">
            flakes</span><span class="pun">[</span><span class="pln">e</span><span class="pun">].</span><span class="pln">render</span><span class="pun">(</span><span class="pln">ctx</span><span class="pun">);</span>
        <span class="pun">}</span>
        <span class="com">/*  一帧一帧的画 */</span>
        <span class="kwd">this</span><span class="pun">.</span><span class="pln">loop </span><span class="pun">=</span><span class="pln"> requestAnimationFrame</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
            drawSnow</span><span class="pun">.</span><span class="pln">apply</span><span class="pun">(</span><span class="pln">that</span><span class="pun">);</span>
        <span class="pun">});</span>
    <span class="pun">}</span>
    <span class="com">/* 调用及控制方法 */</span>
    <span class="kwd">var</span><span class="pln"> snow </span><span class="pun">=</span> <span class="kwd">new</span><span class="pln"> snowFall</span><span class="pun">({</span><span class="pln">maxFlake</span><span class="pun">:</span><span class="lit">60</span><span class="pun">});</span><span class="pln">
    snow</span><span class="pun">.</span><span class="pln">start</span><span class="pun">();</span>
<span class="tag"></script></span>

使用方法:

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

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

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

载入jquery

还是老样子,载入的百度提供的库

<span class="tag"><script</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"http://libs.baidu.com/jquery/1.8.3/jquery.js"</span><span class="tag">></script></span> 
<span class="tag"><script</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"http://libs.baidu.com/jquery/1.8.3/jquery.min.js"</span><span class="tag">></script></span>

原文来源:幻杀博客 » 分享两种圣诞节雪花特效JS代码(网站下雪效果)

版权声明:除特别注明外,本站所有文章均为猫君博客原创

转载请注明:出处来自猫君博客 » 分享两种wordpress网站下雪效果

暂无评论

发表评论