专栏首页Debug客栈JavaScript “袁华”飞雪特效

JavaScript “袁华”飞雪特效

友情提示:此篇文章大约需要阅读 3分钟30秒,不足之处请多指教,感谢你的阅读。

马上就要到了传统节日“春节”?,网站添加了飞雪❄️特效,从网上找了源代码,先要感谢张戈博客分享?,现计划将网站在今天上线至过年回来下线,看看可以么,你可以复制到自己的网站或者博客体验一波,加上《一剪梅》真是别有一番滋味。

<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		: 6,
		maxSize		: 10,
		newOn		: 1000,
		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: 800  /* 定义密集程度,数字越小越密集 */
    });
});
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅析悲观锁与乐观锁

    友情提示:此篇文章大约需要阅读 4分钟17秒,不足之处请多指教,感谢你的阅读。订阅本站 在关系型数据库中,悲观锁与乐观锁是解决资源并发场景的解决方案,接下来将详...

    Debug客栈
  • 蓝桥杯 基础练习 数列特征

    输出三行,每行一个整数。第一行表示这些数中的最大值,第二行表示这些数中的最小值,第三行表示这些数的和。

    Debug客栈
  • Smarty踩坑日记 配置及使用方法

    Smarty是PHP的一个引擎模板,主要是用于前台动态文章嵌套,实现动态链接数据库并显示的作用。

    Debug客栈
  • 纯代码为网站站点添加雪花飘落效果

    代码放哪里就不用我说了吧,依赖 JQurey,如果没效果,请确认网页是否已载入 JQurey

    沈唁
  • 使用Vue完成一个checklist

    这里封装了一个storage.js,用于保存数据至本地,这样下次打开页面还是会恢复至上次关闭的时候。

    zx钟
  • Win7下修改Hosts文件

    WIN7或者VISTAWIN7或者VISTA系统的需要提升用户对Hosts文件的操作权限,否则无效。 具体方法如下: 方法一:按着Shift键,然后Hosts文...

    跟着阿笨一起玩NET
  • Confluence 6 数据收集隐私策略 原

    针对 Confluence 我们很自豪 Confluence 是这个星球上最高效和强大的协作工具,我们也计划继续保持这个特性,尽我们最大的努力提供更新的 Con...

    HoneyMoose
  • hashMap

    https://www.cnblogs.com/skywang12345/category/455711.html

    大学里的混子
  • 动态规划(一)POJ1163

    动态规划算法是比较实用的算法之一,结合实际问题能更好的熟悉这个算法 下面以POJ1163为例子

    Enterprise_
  • python: 序列化/反序列化及对象的深拷贝/浅拷贝

    一、序列化/反序列化 python中内置了很多序列化/反序列化的方式,最常用的有json、pickle、marshal这三种,示例用法如下: import js...

    菩提树下的杨过

扫码关注云+社区

领取腾讯云代金券