这是一个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. SQL Server复制入门(一)----复制简介 (转载)

    简介SQL Server中的复制(Replication)是SQL Server高可用性的核心功能之一,在我看来,复制指的并不仅仅是一项技术,而是一些列技术的集合,包括从存储转发数据到同步数据到维护数 ...

  2. sysbench 多线程异步io模拟mysql测试的脚本

    用于测试的脚本: for size in 100 do cd /mnt/stec sysbench --test=fileio --file-num=1 --file-total-size=${siz ...

  3. shell傳遞參數

    Shell 传递参数 我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 比如我們 ...

  4. months_between()用法

    orcl中months_between()函数用法如下: 格式:即MONTHS_BETWEEN(日期1,日期2) 例如: select months_between(to_date('2018-10- ...

  5. java中的String类的不可变性的小例子

    在java语言中,String类具有不可变性,即常量字符串不可更改.下面的一个小例子简单演示相关概念. public class test { public static void main(Stri ...

  6. nginx 添加虚拟主机 支持php 伪静态

    1添加虚拟主机 进入 /usr/local/nginx/conf/vhost 目录, 创建虚拟主机配置文件 demo.neoease.com.conf ({域名}.conf). 2. 打开配置文件, ...

  7. saxbuilder用法

    xml为我们在网络交换数据带来很大方便,在java中可以使用saxbuilder来操作xml格式文件,下面介绍一下saxbuilder的常用方法. import org.jdom.Document; ...

  8. git pull与本地修改冲突

    1.先将本地修改存储起来 $ git stash 这样本地的所有修改就都被暂时存储起来 . $ git stash list                 可以看到保存的信息: git stash暂 ...

  9. Nowcoder 提高组练习赛-R2

    https://www.nowcoder.com/acm/contest/173#question T1:https://www.nowcoder.com/acm/contest/173/A 题意概述 ...

  10. Docker学习4-Containers - 容器

    用Docker方式构建应用程序,从这个应用程序层次结构的底层容器开始.高于此级别的是一项服务,它定义了容器在生产中的行为方式.在顶层是堆栈,它定义了所有服务的交互. Stack  堆栈 Service ...