使用javascript实现的雪花飞舞的效果
原作者是在body中不停的插入多个小div雪花来向下慢慢飘,一直飘到body的底部后,将雪花移除,于是,将原来的代码稍加修改,让他只是从屏幕的顶部飘落到屏幕底部(不是body的底部)后,就将雪花移除,另外将雪花改为fixed定位.
效果演示:点击这里
<p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script charset="utf-8" type="text/javascript">// <![CDATA[
(function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({ 'position': 'fixed', 'top': '-50px', 'border-radius': '8px','background':'#fff'}),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 1, //雪花的最小尺寸
maxSize : 10, //雪花的最大尺寸
newOn : 100, //雪花出现的频率
flakeColor : "#FFFFFF"
},
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,
height: sizeFlake,
width:sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
}
); }, options.newOn); }; })(jQuery);
// ]]></script>
</p>
<!--下面是调用方法和参数说明-->
<p>
<script type="text/javascript">// <![CDATA[
$(function(){
$.fn.snow({
minSize: 1, //雪花的最小尺寸
maxSize:8, //雪花的最大尺寸
newOn: 100 //雪花出现的频率 这个数值越小雪花越多
});
});
// ]]></script>
</p>
使用javascript实现的雪花飞舞的效果的更多相关文章
- 分析自定义view的实现过程-实现雪花飞舞效果(转载有改动)
声明:本文源码出自实现雪花飞舞效果(有改动)主要通过这篇文来分析自定义view的实现过程. 没事时,比较喜欢上网看看一些新的东西,泡在网上的日子就是一个很不错的网站. 下面开始了,哈哈.^_^ 大家都 ...
- 雪妖现世:给SAP Fiori Launchpad增添雪花纷飞的效果
1995年7月,台湾大宇公司发布了一款国产单机角色扮演游戏神作:<仙剑奇侠传1>,所谓"一包烟,一杯茶",就能在电脑面前坐一整天. 这么经典的游戏Jerry当然已经通关 ...
- javascript超过容器后显示省略号效果(兼容一行或者多行)
javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...
- javascript实现汉诺塔动画效果
javascript实现汉诺塔动画效果 当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- Javascript 及 CSS3 实现进度条效果
Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- 使用Photoshop实现雪花飘落的效果
一.准备工作 软件环境:PhotoshopCS5 实验目的:雪花飘落的效果 二.实验步骤 1,打开素材图片并将原图层复制 2,在菜单栏内选择:滤镜->像素化->点状化,单元格大小选6 提 ...
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- js基本算法:冒泡排序,二分查找
知识扩充: 时间复杂度:算法的时间复杂度是一个函数,描述了算法的运行时间.时间复杂度越低,效率越高. 自我理解:一个算法,运行了几次时间复杂度就为多少,如运行了n次,则时间复杂度为O(n). 1.冒泡 ...
- AutoLayout自动布局
原文转自http://www.cnblogs.com/xjf125/p/4895978.html 目录: 一.什么是AutoLayout? 二.创建autoLayout的方法 三.VFL语言 ...
- Eclipse--Web项目中 .classpath、mymetadata、project文件的功用
Web项目中 .classpath..mymetadata..project文件的作用 创建Web Project时,会自动生成这个三个文件. 一..mymetadata文件 1.部署项目用的,把项目 ...
- centos7 添加图形界面的功能
一般安装centos最小版的时候默认没有图形界面 需要自己安装 sudo yum groupinstall "GNOME Desktop" "Graphical Adm ...
- 每日Scrum(2)
今天是冲刺的第二天,小组主要做了界面的美化,加入了软件的开始动画,以及学校景点的美图介绍: 主要的问题在于除了开始界面,进入软件之后还是有待改进,功能的呈现有待加强.
- JavaScript(二)——语法
1.基本数据类型: 字符串.小数.整数.日期时间.布尔型等. 2.类型转换: 分为自动转换和强制转换,一般用强制转换. 其他类型转换为整数:parseint(): 其他类型转换为小数:parseflo ...
- 关于update set from where
http://blog.csdn.net/xcbsdu/article/details/6736503 下面是这样一个例子: 两个表a.b,想使b中的memo字段值等于a表中对应id的name值 ...
- mydumper 安装报错处理
mydumper 官网:https://launchpad.net/mydumper 下载之后,安装报错: [root@localhost local]# cd mydumper-0.6.2 [roo ...
- Linux 性能优化工具包 sysstat 以及 sysstat 服务
1. sysstat service 1.1. /etc/cron.d/sysstat Linux 下的性能分析,少不了要使用 sysstat 工具包中的命令.同时 sysstat 服务会自动每个10 ...
- FFMPEG ./configure 参数及意义
FFMPEG版本:2.6.2,编译环境:ubuntu 14.4. 不同版本的FFMPEG参数可能不同,可在FFMPEG目录下使用以下命令查看 ./configure --help --help pri ...