这是一个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. Spring中的destroy-method方法

    1. Bean标签的destroy-method方法 配置数据源的时候,会有一个destroy-method方法 <bean id = "dataSource" class  ...

  2. AndroidManifest 配置主活动

    在activity标签中写如下代码: <activity android:name=".MainActivity" android:label="This is M ...

  3. SDN负载均衡

    我负责的工作: (1).前期工作思路设计及方案选定.讲解 (2).后期代码修正 (3).视频制作 负载均衡程序 程序流程图 代码 from mininet.topo import Topo class ...

  4. Spark项目之电商用户行为分析大数据平台之(十二)Spark上下文构建及模拟数据生成

    一.模拟生成数据 package com.bw.test; import java.util.ArrayList; import java.util.Arrays; import java.util. ...

  5. windows下vi/vim编辑器的基本操作

    windows下vi/vim编辑器的基本操作 Contents 1. 工具准备(下载gvim) 2. vi/vim基本入门 2.1. 安装 2.2. 基本使用 3. vi/vim基本命令表 1 工具准 ...

  6. ethereum/EIPs-170 Contract code size limit

    eip title author type category status created 170 Contract code size limit Vitalik Buterin Standards ...

  7. 国家代号(CountryCode)与区号

    Countries and Regions 国家或地区 国际域名缩写 电话代码 时差 Angola 安哥拉 AO -7 Afghanistan 阿富汗 AF 93 0 Albania 阿尔巴尼亚 AL ...

  8. Working With JSON

    JavaScript对象表示法(JSON)是用于将结构化数据表示为JavaScript对象的标准格式,通常用于在网站上表示和传输数据(例如从服务器向客户端发送一些数据,因此可以将其显示在网页上). J ...

  9. 贪心算法——字典序最小问题,Saruman‘s Army

    题目描述 Best Cow Line (POJ 3617) 给定长度为N的字符串S,要构造一个长度为N字符串T.T是一个空串,反复执行下列任意操作: 从S的头部删除一个字符,加到T的尾部: 从S的尾部 ...

  10. 六,ESP8266 TCP Client(基于Lua脚本语言)

    今天不知道是不是让我姐挺失望.......很多时候都不知道自己努力的方向对不对,,以后能不能带给家人最美好的期盼...... Init.lua 没啥改变,,就改了一下加载Client.lua gpio ...