js 实现下雪特效

直接上代码 放到你的script 标签中 具体效果参考博客页面

(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: 30,/* 定义雪花最大尺寸 */
	    newOn: 300  /* 定义密集程度,数字越小越密集 */
    });
});

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python利用random生成一个列表内的随机数

    其权重值表示该数或该范围内的数输出概率大,输出结果为列表 随机取1-33之间的6个随机数,不重复:

    崔笑颜
  • java中的数学工具类Math

    java.util.Math类是数学相关的工具类,里面提供了大量的静态方法,完成与数学运算相关的操作。

    崔笑颜
  • list集合分页

    java对list进行分页 业务场景因为数据是通过从数据库中多次sql查出来之后存放到list 无法使用sql进行分页

    崔笑颜
  • JavaScript “袁华”飞雪特效

    马上就要到了传统节日“春节”?,网站添加了飞雪❄特效,从网上找了源代码,先要感谢张戈博客分享?,现计划将网站在今天上线至过年回来下线,看看可以么,你可以复制到自...

    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_

扫码关注云+社区

领取腾讯云代金券