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 的 ...
随机推荐
- SQL Server 如何设置数据库的默认初始大小和自动增长大小
我们在SQL Server中新建数据库的时候,可以选择数据库文件及日志文件的初始大小.自动增长大小和最大大小,如下图所示: 可以通过设置更改数据库初始大小.自动增长大小和最大大小: 但是其实在SQL ...
- 搞定pycharm专业版的安装
学习python也有一段时间了,装了python2,也装了python3.对于IDE当然首选了人人拍掌叫好的pycharm.其实作为小白,一开始的时候并不知道什么是IDE,什么是pychram,以为装 ...
- etc/skel目录介绍
/etc/skel目录的作用: /etc/skel目录是用来存放新用户配置文件的目录,当我们添加新用户时,这个目录下的所有文件会自动被复制到新添加的用户家目录下,默认情况下,/etc/skel 目录下 ...
- 嵌入式开发板LInux更新系统、安装软件、下载资源碰到的问题
CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none 先同步系统时间 shell 输入命令 date 如果显示的时间跟你本地时间不一样,先设 ...
- 1.3Windows控制台的简单操作:
目录: 1.控制台的打开 2.盘符的跳转 3.跳转到某个文件夹 4.展示文件 5.清屏 6.历史记录 7.拖动添加路径 8.自动补齐 9.正常退出 1.打开控制台:系统图标键 + R,输入cmd,按回 ...
- python 下 安装openCV
安装openCV openCV是Intel 创建的计算机视觉库,用于计算机图像处理. 安装anaconda,在命令行中输入conda install cv2/opencv 报错汇总 网络连接问题 报错 ...
- 【Alpha 冲刺】 2/12
今日任务总结 人员 今日原定任务 完成情况 遇到问题 贡献值 胡武成 完成API文档编写 由于外出比赛,故推迟 无 0 孙浩楷 1.完成VUE框架搭建 2.寻找在线编辑图片插件 已完成 WEB在线编辑 ...
- 团队作业8-测试与发布(beta阶段)
小组成员 [组长]金盛昌(201421122043).刘文钊(20142112255).陈笑林(201421122042) 张俊逸(201421122044).陈志建(201421122040).陈金 ...
- 1、爬虫简介与request模块
一 爬虫简介 概述 近年来,随着网络应用的逐渐扩展和深入,如何高效的获取网上数据成为了无数公司和个人的追求,在大数据时代,谁掌握了更多的数据,谁就可以获得更高的利益,而网络爬虫是其中最为常用的一种从网 ...
- JAVA框架 Mybaits
注意:我们在resultType中,对于selectlist方法也是projo类.resultType参数的含义是list的泛型的类型. 一:jar包下载: https://github.com/m ...