没有所谓的捷径
一切都是时间最平凡的累积

WordPress下雪网页特效

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 Snow Effect   博客后台插件中搜索安装即可。

启用后就已经启用了下载特效了。

» 转载请保留出处:豫章小站 » 《WordPress下雪网页特效》
» 本文链接地址:https://blog.mydns.vip/1154.html
» 如果喜欢可以: 点此订阅本站
赞(4) 打赏
声明:本站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,若涉及侵权请及时告知,将会在第一时间删除,联系邮箱:contact@mydns.vip。文章观点不代表本站立场。本站原创内容未经允许不得转载,或转载时需注明出处:豫章小站 » WordPress下雪网页特效
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

智慧源于勤奋,伟大出自平凡

没有所谓的捷径,一切都是时间最平凡的累积,今天所做的努力都是在为明天积蓄力量

联系我们赞助我们

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

支付宝扫一扫打赏

微信扫一扫打赏