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 的 ...
随机推荐
- 注意Sqlserver中使用with(nolock)后实际上还是会加架构锁,只是不对要查询的数据加S锁而已(转载)
开发人员喜欢在SQL脚本中使用WITH(NOLOCK), WITH(NOLOCK)其实是表提示(table_hint)中的一种.它等同于 READUNCOMMITTED . 具体的功能作用如下所示(摘 ...
- ndk的注意事项
从开源网站下载的源码,需要自己编译c源码成so类库.当时用Android studio 运行总是报错"finished with non-zero exit value 2"报错定 ...
- linux常见问题解决
1.登录环境故障的原理及解决办法? -bash-4.1$ -bash-4.1$ cp /etc/skel/.bash* .
- python基础学习20----线程
什么是线程 线程,有时被称为轻量进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆栈组成.另外,线程是进程中 ...
- ensp 路由器无法启动
出现错误代码 40.41等几乎都是虚拟机问题, 卸载干净后重新安装就好.推荐卸载软件:iobit uninstaller 安装注册后无法创建Host-Only,最好更换虚拟机版本, 我用的虚拟机版本是 ...
- xml的xsi:type序列化和反序列化
最近在做HL7V3的对接,关于XML的序列化和反序列化遇到xsi:type的问题解决方法 实体类定义: public class HL7V3_ProviderOrganization { public ...
- def chi(*food,**kw):
def chi(*food,**kw): print(food,kw)chi("cong","蒜",'姜','可乐',"J=Juice",a ...
- Python学习(七)面向对象 ——继承和多态
Python 类的继承和多态 Python 类的继承 在OOP(Object Oriented Programming)程序设计中,当我们定义一个class的时候,可以从某个现有的class 继承,新 ...
- Django商城项目笔记No.10用户部分-登录接口
Django商城项目笔记No.10用户部分-登录接口 添加url路由 接下来第二步,增加返回内容: 增加结果如下: 配置:上边的方法定义了返回的内容都有哪些,那这个方法jwt还不知道,需要配置: 修改 ...
- npm WARN unmet dependency问题的解决方法
remove node_modules $ rm -rf node_modules/ run $ npm cache clean 详见这里: http://stackoverflow.com/ques ...