飘雪效果
飘雪效果
作者：matrix 被围观: 2,606 次 发布时间：2017-01-13 分类：零零星星 | 无评论 »
这是一个创建于 2056 天前的主题，其中的信息可能已经有所发展或是发生改变。
这个季节看到TGP的LOL新闻页面的飘雪效果挺好看的。顺手就copy了下
飘雪效果网上貌似大多数代码都是http://x-team.com 。
css，js，png文件都整理出来了也就记录下。 都取自15w.com
直接盗链
建议代码放到html中的body标签中的底部加载
<link rel="stylesheet" href="//www.15w.com/ui/pages/others/2016/snow/css/snow.css?v3" type="text/css" />
<script type="text/javascript" src="//www.15w.com/ui/pages/others/2016/snow/js/snow.js?v5"></script>
<script>
createSnow("img/", 30);
</script>若是WordPress：
add_action('wp_footer', 'snow_footer');
function snow_footer()
{
if ('1' === date("n")) {//一月份才会有飘雪效果
print <<<R
<link rel="stylesheet" href="//www.15w.com/ui/pages/others/2016/snow/css/snow.css?v3" type="text/css" />
<script type="text/javascript" src="//www.15w.com/ui/pages/others/2016/snow/js/snow.js?v5"></script>
<script>
createSnow("img/", 30);
</script>
R;
}
}文件本地化
文件: https://pan.baidu.com/s/1i5cAnhb#383t
提取码在＃字符后面
注意需要修改snow.js 105行处代码
peace
P.S. 180206
jd页面的飘雪效果。依赖JQ
页面中添加画布div容器
<div class="snow-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001;"></div>
然后引入js
three.js和snow.js（可修改为本地的离线图片）资源包：jd-snow
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
