网站雪花飘落特效

松鼠小

发表文章数:103

松鼠工具箱

一个汇集海量优质在线工具网站的精美网址导航。

立即查看
首页 » WordPress » 网站雪花飘落特效

网站雪花飘落特效

一月份相信很多地方应该在下雪,

在网站上也有雪花飘该很有氛围吧!

笔者一番探索实现了该功能,

只需要一些代码就可以实现。

这里只展示一下手机端效果

网站雪花飘落特效

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

将以上代码插入到 footer.php 中

注意:粘贴到 </body> 标签之前

你可使用 WordPress 的工具修改

【外观】-【主题编辑器】,主题页脚

 

建议下载文件修改,后用 FTP 工具上传

清除缓存后,刷新网页查看网页效果

若无效果,请确认是否已引入 JQurey

若无,在上面代码之前引入 如下库即可

<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>

另一种方案可参考沈唁志的博客

https://qq52o.me/1518.html

转载请注明出处: 转载或复制请以 超链接形式 并注明出处 技术松鼠
原文地址:《网站雪花飘落特效》 作者:松鼠小,发布于2020-01-21

分享到:
赞(2) 打赏

评论 抢沙发

评论前必须登录!

  注册



这里木有人,抢个沙发呗 o(๑◕ ▽ ◕๑)~


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册