JQ_下雪特效
这是一个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_下雪特效的更多相关文章
- 给你的WordPress站点添加下雪特效
今天看到这个教程,感觉挺应景的,就自己尝试了下,效果还行,没截GIF图 方法: 该js文件已支持https,同时已将其及相关雪花图片进行CDN加速处理,可直接调用. 找到WordPress主题的foo ...
- HTML页面下雪特效
1. [代码][HTML]代码 <a href="javascript:void(function(){var d = document,a = 'setAttribute' ...
- 纯css实现下雪特效
//------------------ css ------------------- /*Keyframes*/ @keyframes snow { 0% { background-positio ...
- js实现下雪雪花特效
两种下雪特效: 1. <script type="text/javascript"> (function($){ $.fn.snow = function(option ...
- canvas雪花特效-jQuery插件实现
这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...
- Web前端资源汇总
本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...
- 壹度DIY_微信小程序组件_小程序插件开发
开源免费插件,diy特有的页面机制,搭配30+自定义组件,让你的站点每一个页面都可以完全自定义,可无缝对接任意小程序,如有疑问加入qq壹度小程序交流群:302866773:或wx:liu2417301 ...
- cocos2dx基础篇(23) 粒子系统CCParticleSystem
[3.x] (1)去掉"CC" (2)粒子位置模式 tPositionType 改为强枚举类型 ParticleSystem::PositionType:: // ...
- VisualEffectGraph概述
Visual Effect Graph 由来: Visual Effect Graph 是2018.3 以后版本,出的新的粒子特效技术.它是用显卡渲染特效,区别于传统的Patical system 的 ...
随机推荐
- 数据库导入.bacpac 文件创建新实例
先连接好数据库,然后打开左侧 对象资源管理器,选择数据库 右键单击 ---> 选择导入数据层应用程序 根据提示向导一步步走就行了 部分导入失败以及处理方案 异常1 : 在数据库master中拒 ...
- EntityFramework Code-First 简易教程(二)-------Code First约定
Code First 约定 在前一篇中,我们已经知道了EF Code-First怎样从模型类(domain classes)中创建数据库表,下面,我们开始学习默认的Code-First约定. 什么是约 ...
- WEB 报表导入导出操作
/** * 报表导出 * @param response */ @RequestMapping("/stuExcel") @LogAnno(value="对学生数据进行了 ...
- MySQL升级后 MySQL 5.7 时间不兼容问题
- MSCRM2016 取消邮箱强制SSL
在新建电子邮件服务器配置文件时Advanced中的Use SSL for Incoming/Outgoing Connection默认都是启用的而且无法编辑,启用SSL当然是为了安全的考虑,但当客户的 ...
- Linux学习之路-2017/12/22
第三章 管道符.重定向与环境变量 管道命令符,“|”,作用是将前一个命令的标准输出当作后一个命令的标准输入, 格式:“命令A|命令B” 输入输出重定向, 标准输入,STDIN,文件描述符为0,默认从 ...
- 利用Maven插件将依赖包、jar/war包及配置文件输出到指定目录
写在前面 最近遇到一个朋友遇到一个项目需要将maven的依赖包和配置文件分开打包然后用脚本执行程序.这样的好处在于可以随时修改配置文件内容及查看jar包.如果将所有打成一个jar包就会有个问题(例 ...
- 深入学习css之background属性
css中允许应用纯色作为背景,也允许使用图片作为背景. background一共有8个对应的属性: 1.background-color:颜色值 用于设定背景的颜色 有3种定义颜色的形式, 1, 颜色 ...
- FastDFS_v5.05+nginx+cache集群安装配置手册
转载请出自出处:http://www.cnblogs.com/hd3013779515/ 1.FastDFS简单介绍 FastDFS是由淘宝的余庆先生所开发,是一个轻量级.高性能的开源分布式文件系统, ...
- PSR规范0-4整理
PSR规范 psr规范 引言: PSR 是 PHP Standard Recommendations 的简写,由 PHP FIG 组织制定的 PHP 规范,是 PHP 开发的实践标准.这些规范的目的是 ...