大家有没有发现这篇文章背景与其他文章不一样呢?
那应该如何实现?
/*文章背景图CSS*/
.article {
background-image: url(https://bpic.588ku.com//back_origin_min_pic/21/07/09/8cd80f75ec2176a63c8e1a3d6479b669.jpg%21/fw/750/quality/99/unsharp/true/compress/true);
}
//雪花飘落JS
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px', 'cursor': 'pointer'}).html('❄'),
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 /* 定义密集程度,数字越小越密集 */
});
});
这是实现这些的代码,大家都知道很多的Wordpress主题是不支持文章页内是不支持自定义CSS、JS的包括我目前正在使用的子比主题
这就需要我们对主题添加一些代码了
使用教程
1、子比主题没有添加代码修改过主题文件,请自行创建一个func.php
文件来添加代码,如果你是别的主题可以直接添加在functions.php
内
代码添加后撰写页下方会出现两个区块
分别是自定义CSS和自定义JS
到这教程就结束了,大家可以自由发挥了
本文最后更新于:
THE END
- 最新
- 最热
只看作者