这是一个jQuery下雪特效。
特效的代码如下:

<style>
body{background:black;color:white}
</style>
<script>
/**
* js网页雪花效果jquery插件 
* 柯乐义 keleyi.com 整理
* http://keleyi.com/a/e8t7hoj4.htm
*/
(function($){

$.fn.snow = function(options){

var $flake = $('<div id="snowbox-k'+'eleyi-com" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10, //雪花的最小尺寸
maxSize : 20, //雪花的最大尺寸
newOn : 1000, //雪花出现的频率
flakeColor : "#FFFFFF" //柯乐义 keleyi.com 整理
},
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 - 40,
endPositionLeft = startPositionLeft - 100 + 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);</script>

<script>
$(function(){
$.fn.snow({ 
minSize: 5, //雪花的最小尺寸
maxSize: 50, //雪花的最大尺寸
newOn: 300 //雪花出现的频率 这个数值越小雪花越多
});
});
</script>

JQ_下雪特效的更多相关文章

  1. 给你的WordPress站点添加下雪特效

    今天看到这个教程,感觉挺应景的,就自己尝试了下,效果还行,没截GIF图 方法: 该js文件已支持https,同时已将其及相关雪花图片进行CDN加速处理,可直接调用. 找到WordPress主题的foo ...

  2. HTML页面下雪特效

    1. [代码][HTML]代码     <a  href="javascript:void(function(){var d = document,a = 'setAttribute' ...

  3. 纯css实现下雪特效

    //------------------ css ------------------- /*Keyframes*/ @keyframes snow { 0% { background-positio ...

  4. js实现下雪雪花特效

    两种下雪特效: 1. <script type="text/javascript"> (function($){ $.fn.snow = function(option ...

  5. canvas雪花特效-jQuery插件实现

    这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...

  6. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  7. 壹度DIY_微信小程序组件_小程序插件开发

    开源免费插件,diy特有的页面机制,搭配30+自定义组件,让你的站点每一个页面都可以完全自定义,可无缝对接任意小程序,如有疑问加入qq壹度小程序交流群:302866773:或wx:liu2417301 ...

  8. cocos2dx基础篇(23) 粒子系统CCParticleSystem

    [3.x]     (1)去掉"CC"     (2)粒子位置模式 tPositionType 改为强枚举类型 ParticleSystem::PositionType:: // ...

  9. VisualEffectGraph概述

    Visual Effect Graph 由来: Visual Effect Graph 是2018.3 以后版本,出的新的粒子特效技术.它是用显卡渲染特效,区别于传统的Patical system 的 ...

随机推荐

  1. python基础学习23----IO模型(简)

    对于一个网络IO(network IO),它会涉及到两个系统对象,一个是调用这个IO的process (or thread),另一个就是系统内核(kernel).当一个read操作发生时,该操作会经历 ...

  2. 【转】Java学习---内存泄露与溢出的区别

    Java内存泄露与溢出的区别 Java内存泄漏就是没有及时清理内存垃圾,导致系统无法再给你提供内存资源(内存资源耗尽): 而Java内存溢出就是你要求分配的内存超出了系统能给你的,系统不能满足需求,于 ...

  3. unbuntu 安装python包提示E: Unable to locate package python-timeout

    今天本想着在unbuntu环境下安装python的一个包,安装了几次都提示 E: Unable to locate package python-timeout 查阅了一些信息才知道,原来是一些软件源 ...

  4. 一些安卓模拟器的IP问题和getOutputStream();关于connect();的函数异常的问题

    ip问题 1.不能使用local host 和127.0.0.1作为本地服务器的地址,而网上无论10.0.0.2还是10.0.2.2的8080端口都无法访问.真正的地址应该在CMD 键入ipconfi ...

  5. vlanif和vlan路由

    配置基于接口划分VLAN示例(接入层设备作为网关) 简介 划分VLAN的方式有:基于接口.基于MAC地址.基于IP子网.基于协议.基于策略(MAC地址.IP地址.接口).其中基于接口划分VLAN,是最 ...

  6. volatile和synchronized的区别与联系[转]

    volatile是一个变量修饰符,而synchronized是一个方法或块的修饰符.所以我们使用这两种关键字来指定三种简单的存取变量的方式. int i1;                       ...

  7. 使用Winform程序作为WCF服务的宿主

    如果我们自己新建一个WCF服务库,生成了dll文件.那我们需要创建一个宿主程序,在本例中我们新建一个Winform程序作为WCF的宿主程序. 在网上很多教程里对创建过程写的很模糊,错误也很多.本文是作 ...

  8. laravel记录笔记Laravel 连接数据库、操作数据库的三种方式

    laravel中提供DB facade(原始查找).查询构造器.Eloquent ORM三种操作数据库方式 1.连接数据库 .env 数据库配置 DB_HOST=localhost dbhost DB ...

  9. k8s mongodb 集群配置

    service.yaml apiVersion: v1 kind: Service metadata: name: mongo labels: name: mongo spec: ports: - p ...

  10. 向大家推荐一个在.Net下使用C#语言和Managed DirectX 9开发游戏的视频教程

    视频教程:3D游戏开发步步高系列课程(微软课堂).美中不足的是视频的声音和画面不太对应.专心的听声音,听老师讲解吧. PPT和源码下载:3D游戏开发步步高系列课程-PPT和源码 网址链接:3D游戏开发 ...