博客网站添加下雪特效插件
整个站都会开始下雪,感觉嘚一下就上来了!并且特效不会影响网站操作。
源码截图
代码如下:
- 外链式
- color: "#cccccc"是雪花颜色,可以自己改
<script src="https://www.cenguigui.cn/tianjia/snow" rel="external nofollow" ></script>
<script>var sf = new Snowflakes({color: "#cccccc"});</script>
还有一种:
- 你要做成js外链,也可以内嵌,看自己喜好
- flakeColor: "#00ffff" 是雪花颜色,可以自己改
代码如下:
<!--雪花-->
<script src="https://www.cenguigui.cn/tianjia/xuehua.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.snow = function (options) {
var $flake = $('<div id="snowbox" />').css({ 'position': 'absolute', 'z-index': '9999', 'top': '-50px' }).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize: 10,
maxSize: 20,
newOn: 1000,
flakeColor: "#00ffff" /* 此处可以定义雪花颜色,若要白色可以改为#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: 800 /* 定义密集程度,数字越小越密集 */
});
});
</script>
<!--雪花 end-->
樱花
- 外链式,自己可以搬运代码上传到自己服务器或者自己用作本地都行
<!-- 樱花 -->
<script src="https://www.cenguigui.cn/log/sakura.js"></script>
<!-- 樱花 end-->
2 条评论
雪花颜色可以自己修改.......#cccc是白色
#cccccc是白色