jQuery.snowflake雪花飘落插件
一、前言
前言:最近圣诞节来临,需要在页面上应用一个雪花飘落的效果,做之前产品经理给了我网络上的一个demo,地址是
http://demo.lanrenzhijia.com/demo/1225/sd/,预览了一下,效果不错,但是性能可以再优化,源码中使用setInterval重复定时器,
dom在不停地插入移除,这里主要优化这两个地方,使用setTimeout替换setInterval,减少页面dom的重排,其他地方可以自己调整。
二、应用实例demo
/**
* component: jQuery.snowflake 2013/12/19 华子yjh
* invoking: jQuery.snowflake(options)
*
// 配置对象
options = {
length: 26, // 数量
interval: 1000, // 雪花之间出现的时间间隔
duration: 24000 // 雪花的动画时间
}
*
*/
demo地址1:http://miiee.taobao.com/activity/shengdan.htm
demo地址2:http://miiee.taobao.com/
三、设计思路
第一步:
用HTML实体代表雪花外形,雪花出现的位置,大小都是随机的
第二步:
保持相邻雪花之间出现的时间间隔(或者它们之间的距离)永远一致; 就必须使用重复定时器,使用双setTimeout,而非setInterval,这一步很重要
setTimeout(function call() {
// do something
setTimeout(call, interval);
},0); // 使用双setTimeout模拟重复定时器对于对于自动轮播等其他应用非常有用,
// 推荐阅读javascript高级程序设计一书有关setInterval的缺点及解决办法
四、组件源码
最初代码:
$.extend({
// 雪花飘落组件
snowflake: function(options) {
var flakeHtmlStr = '',
config = {
length: 26, // 数量
interval: 1000, // 雪花之间出现的时间间隔
duration: 24000 // 雪花的动画时间
};
$.extend(config, options || {}); var len = config.length,
$win = $(window),
win_width = $win.width(),
win_height = $win.height(),
timeoutId = null,
$items,
i,
initStyle = {
position: 'absolute',
top: '-50px',
zIndex: 9999,
opacity: 1,
fontSize: 0,
color: '#FFF'
},
endStyle = {
top: win_height + 50 + 'px',
opacity: 0
}; // 插入DOM,并初始化其样式
for (i = 0; i < len; i++) {
flakeHtmlStr += '<div class="snow-flake">❄</div>';
}
$(flakeHtmlStr).appendTo('body');
$items = $('.snow-flake').css(initStyle).wrapAll('<div id="snowflake-box"></div>'); // 处理单个雪花
function handleItem(idx) {
var $itm = $items.eq(idx).css(initStyle),
w, val;
$itm.css({
fontSize: 20 + Math.ceil(Math.random() * 30, 10) + 'px'
});
w = $itm.width();
val = Math.floor(Math.random() * win_width);
if ((val + w) >= win_width) {
val = val - w;
}
$itm.css({
left: val + 'px'
})
.animate(endStyle, config.duration);
} // 开始运行
function running() {
var i = 0;
setTimeout(function call() {
handleItem(i);
if (i < len-1) {
i++;
}
else {
i = 0;
}
setTimeout(call, config.interval);
}, 0);
}
running();
}
}); $.snowflake(); // 调用
更新优化后的代码:
$.extend({
// 雪花飘落组件
snowflake: function(options) {
var $items, len,
win_height = $(window).height(),
maxVal = $(window).width() - 24, // 防止浏览器出现横向滚动条,24px为font-size: 35px;时的宽度 options = $.extend({
length: 21, // 数量
interval: 1200, // 雪花之间出现的时间间隔
duration: 24000 // 雪花的动画时间
}, options || {}); len = options.length; // 初始化dom
(function(){
var flakeHtmlStr = '', i; // 插入DOM,并初始化其样式
for (i = 0; i < len; i++) {
flakeHtmlStr += '<div class="snow-flake">❄</div>';
}
$(flakeHtmlStr).appendTo('body');
$items = $('.snow-flake').css({
position: 'absolute',
top: '-40px',
color: '#FFF',
zIndex: 999
}).wrapAll('<div id="snowflake-box"></div>');
}()); // 处理单个雪花
function handleItem(idx) {
$items.eq(idx)
.css({
top: '-40px',
opacity: 1,
left: Math.random() * maxVal + 'px',
fontSize: [25, 30, 35][(Math.random() * 3).toString().charAt(0)] + 'px'
})
.animate({
top: win_height + 'px',
opacity: 0
}, options.duration);
} // 开始运行
function running() {
var i = 0;
setTimeout(function call() {
handleItem(i);
if (i < len-1) {
i++;
}
else {
i = 0;
}
setTimeout(call, options.interval);
}, 0);
}
running();
}
}); $.snowflake(); // 调用
转载请注明出处:博客园华子yjh
jQuery.snowflake雪花飘落插件的更多相关文章
- jquery的浪漫(跑马灯 + 雪花飘落)
jquery的浪漫 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() jquery的运用,对dom元素的增删改查 css3 3d 功能的灵活运用 ...
- Qt实现桌面动态背景雪花飘落程序
曾经收到过一份礼物,一个雪花飘落的程序,觉得效果很炫,通过前几篇的学习,我们已经掌握了贴图的一些技巧了,那么现在就可以自己实现了(当然你必须先拥有qt信号与槽的基础知识),这里先看效果 ...
- HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- 个人网站html5雪花飘落代码JS特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
- 简单说 JavaScript实现雪花飘落效果
说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函 ...
- 16款最佳的 jQuery Time Picker 时间选择插件
jQuery 插件可以为你做许多事情,你可以很容易地把这些插件集成到您的网站.网络上的 jQuery 日期选择器和日历插件很多,但找不到很满意的时间选择器插件. 在这里,我们收集了最好的一组 jQue ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
随机推荐
- 用CNTK搞深度学习 (二) 训练基于RNN的自然语言模型 ( language model )
前一篇文章 用 CNTK 搞深度学习 (一) 入门 介绍了用CNTK构建简单前向神经网络的例子.现在假设读者已经懂得了使用CNTK的基本方法.现在我们做一个稍微复杂一点,也是自然语言挖掘中很火 ...
- HoloLens开发手记 - Unity之场景共享 Shared holographic experiences in Unity
佩戴HoloLens的多个用户可以使用场景共享特性来获取集合视野,并可以与固定在空间中某个位置的同一全息对象进行交互操作.这一切是通过空间锚共享(Anchor Sharing)来实现的. 为了使用共享 ...
- 迅雷首席架构师刘智聪:微信小程序的架构与系统设计的几点观感
笔者注:本文来自于迅雷首席工程师刘智聪的个人分享,他毕业于南昌大学化学系,加入迅雷后设计开发了多款迅雷核心产品,凭借“大规模网络流媒体服务关键支撑技术”项目获得2015年国家科学技术进步奖二等奖,同时 ...
- [C#基础]Func和Action学习
目录 委托 Action Func 总结 委托 委托的那些事 关于委托的基本定义,在很久之前的这篇文章中,有个简单的介绍.稍微回顾一下. 委托是c#中类型安全的,可以订阅一个或多个具有相同签名方法的函 ...
- setter方法的内存错误
- (void)setList:(ClassicList *)list { self.list = list; _titleLabel.text = list.activityName; _addre ...
- Xdebug开源PHP程序调试器
Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况. 本文为大家讲解的是在linux下xdebug的安装和配置方法,感兴趣的同学参考下 ...
- 复习CSS
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Spring控制Hibernate的缓存机制ehcache
首先在spring.xml中进入bean <prop key="hibernate.cache.use_second_level_cache">true</pro ...
- 前端筑基篇(一)->ajax跨域原理以及解决方案
说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 参考来源 什么是跨域 ajax跨域的表现 跨域的原理 如何解决跨域问题 JSONP方式解决跨域问题 ...
- Throwable和Exception的区别
Java语言要求java程序中(无论是谁写的代码)所有抛出(throw)的异常都必须是从Throwable派生而来.当然,实际的Java编程中,由于JDK平台已经为我们设计好了非常丰富和完整的异常对象 ...