WordPress下雪插件+网页下雪特效代码

作者:Tigh     发布于「WordPress」 - 猫雅博客

WordPress下雪插件+网页下雪特效代码-猫雅博客
2018-12-20 分类:WordPress 阅读(377) 评论(1) 百度已收录
当前位置:猫雅博客 > 网站相关 > WordPress > 正文
赞(2) 打赏

作者:Tigh

站长QQ1165500646

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

这么冷的天,不下雪的博客都不好玩了

 

1,网页下雪特效代码版

复制提供的JS代码,放入网页中就会自动加载特效。

<!– 下面是JS代码,放在body中 –>
<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 : 10,
maxSize : 20,
newOn : 1000,
flakeColor : “#AFDAEF” /* 此处可以定义雪花颜色,若要白色可以改为#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: 50,/* 定义雪花最大尺寸 */
newOn: 300 /* 定义密集程度,数字越小越密集 */
});
});
</script>
<!– 代码结束 –> 

如果出不来,说明网站中没有加载JS库,可以把下面两段JS导入到网站头部或者底部。

<!– 引入两段JS –>
<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>

提示:加载过多的JS特效,会影响整体网页速度和时长,如果对速度要求过高,各位站长斟酌后自行安装使用。

2,WordPress下雪插件版

如果你使用的是WP程序的话,就可以使用Wordpress插件来实现,已经为大家提供一些Wordpress下雪插件:WP Snow Effect   博客后台插件中搜索安装即可。

WordPress下雪插件+网页下雪特效代码
WordPress下雪插件+网页下雪特效代码
启用后就已经启用了下载特效了,是不是很神器呢?当然也可以根据爱好自己设置插件中的参数。英文含义自己搜索翻译吧。

抱歉,隐藏内容 回复 后刷新可见
分享到:
未经允许不得转载:

作者:Tigh, 转载或复制请以 超链接形式 并注明出处 猫雅博客
原文地址:《WordPress下雪插件+网页下雪特效代码》 发布于2018-12-20

评论 1

6 + 4 =
  1. #1
    qq_avatar

    谢谢分享!

    A网站搭建+影视App制作+苹果签名 Google Chrome Windows 5个月前 (12-28)回复
WordPress下雪插件+网页下雪特效代码

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

这绝对不是广告!

灌水说明

由于评论过多,垃圾评论日益严重,决定开始封禁不正常评论,我分享资源不欠谁,所以对于抱着敷衍不正常的评论者,很抱歉啦,本站不对你开放。

封禁列表
切换注册

登录

忘记密码 ?

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

Q Q 登 录
微 博 登 录
切换登录

注册