10 款基于jQuery/JavaScript的圣诞主题效果

     圣诞节快到了，赶快为你的网站打扮一番，换上节日的盛装吧！本文为你整理了10款使用jQuery和 JavaScript打造的圣诞主题效果，希望能给你带来些许惊喜。（PS：经过小编测试，下面的部分效果仅支持IE浏览器）    <br />    <br />    <strong>1.倒计时数字钟</strong>    <br />    <br /> 设计一个JavaScript圣诞倒计时数字时钟，这个数字钟利用网站访问者的计算机上的时间来进行倒计时，因此这个脚本非常灵活，可以根据不同的时区设置对应的时间。    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/cc8dc514db8aaa289ca1010237de95e8.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="http://www.xfunda.com/index.php?option=com_content&view=article&id=112:javascript-christmas-countdown-digital-clock&catid=40:javascript&Itemid=75" target="_blank">源码</a> /    <a href="http://www.xfunda.com/index.php?option=com_content&view=article&id=112:javascript-christmas-countdown-digital-clock&catid=40:javascript&Itemid=75" target="_blank">演示</a>    <br />    <br />    <strong>2.闪烁的彩灯</strong>    <br />    <br /> 在网页中展示彩灯效果，你只需要把下面链接中的代码粘贴到网页的HTML中即可。    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/3ab1d40496215fc91873f7ce81e56db9.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317182456545966" target="_blank">源码/演示</a>    <br />    <br />    <strong>3.谷歌的圣诞涂鸦</strong>    <br />    <br /> 随着圣诞节的临近，我们应将精力从丰盛的晚餐转移到一些更有意义的事情上，这样才能保持好身材。因此，让我们试试用jQuery和CSS创建谷歌的动画logo！    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/16db9f3750a150db28076e390ed0eacf.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317183241916762" target="_blank">源码</a> /    <a href="/misc/goto?guid=4958317184027487844" target="_blank">演示</a>    <br />    <br />    <strong>4.雪花效果</strong>    <br />    <br /> 用这个超棒的动画效果装饰你的网站吧！雪花在页面中轻轻飘下，直至消失。雪花只是这个脚本支持的图案之一，你也可以使用其他图案。    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/8d508af263b12b830a4a2092484a080a.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317184806176790" target="_blank">源码/演示</a>    <br />    <br />    <strong>5.暴风雪效果</strong>    <br />    <br /> 暴风雪是一个基于JavaScript的雪花效果，很容易添加到网页上，且免费使用、易于设置。一段JavaScript代码就包含了所需功能，不需要任何图片。    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/b948526dfe93ec11944d4ed003c5aa5b.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317185590387360" target="_blank">源码/演示</a>    <br />    <br />    <strong>6.jQuery飘雪效果升级版（添加了雪堆积效果）</strong>    <br />    <br /> 添加雪堆积效果插件后，你可以通过jQuery选择器来把雪收集到顶部。其使用了canvas标签，只支持IE8以上的浏览器。    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/751c93dc7ca278e5758811a6dab10d1c.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317186377806998" target="_blank">源码</a> /    <a href="/misc/goto?guid=4958317187158657460" target="_blank">演示</a>    <br />    <br />    <strong>7.发光的圣诞树</strong>    <br />    <br /> 这段JavaScript代码将根据随机的灯光位置生成随机大小的圣诞树。    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/19f64f6b1ad72e077d5a1632e6851539.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317187940516454" target="_blank">源码/演示</a>    <br />    <br />    <strong>8.圣诞老人鼠标跟随效果</strong>    <br />    <br /> 这是一个很棒的圣诞主题鼠标跟随效果，圣诞老人跟随你的鼠标移动，而且无论他去哪里，身后还会留下自己的小图像。这个神奇的鼠标跟随效果将使你的圣诞页面更加出彩。    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/3a223d5f115252922bedc1d31453a439.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317188729262607" target="_blank">源码/演示</a>    <br />    <br />    <strong>9.浮动的圣诞滚动条</strong>    <br />    <br /> 用JavaScript创建一个浮动的圣诞滚动灯箱，其中还有飘雪动画和吸引眼球的横向走马灯滚动文字。    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/f9674b1312e0cd3c1c7c1558498b34d6.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317189513109064" target="_blank">源码/演示</a>    <br />    <br />    <strong>10.ASCII码圣诞树动画</strong>    <br />    <br /> 使用这段JavaScript代码可以创建一个ASCII码圣诞树动画。    <br />    <br />    <div style="text-align:center;">     <img alt="10 款基于jQuery/JavaScript的圣诞主题效果" src="https://simg.open-open.com/show/6480472d3c7f24c1d7f7cf92dee8646e.jpg" width="580" height="150" />    </div>    <br />    <br />    <a href="/misc/goto?guid=4958317190308175619" target="_blank">源码/演示</a>    <br />    <br /> 英文原文：    <a href="/misc/goto?guid=4958317191096759312" target="_blank">10 jQuery and JavaScript Christmas Effects</a>    <br />    <br /> 转自：    <a href="/misc/goto?guid=4958317191885504328" target="_blank">http://www.iteye.com/news/23631</a>