原作者是在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实现的雪花飞舞的效果的更多相关文章

  1. 分析自定义view的实现过程-实现雪花飞舞效果(转载有改动)

    声明:本文源码出自实现雪花飞舞效果(有改动)主要通过这篇文来分析自定义view的实现过程. 没事时,比较喜欢上网看看一些新的东西,泡在网上的日子就是一个很不错的网站. 下面开始了,哈哈.^_^ 大家都 ...

  2. 雪妖现世:给SAP Fiori Launchpad增添雪花纷飞的效果

    1995年7月,台湾大宇公司发布了一款国产单机角色扮演游戏神作:<仙剑奇侠传1>,所谓"一包烟,一杯茶",就能在电脑面前坐一整天. 这么经典的游戏Jerry当然已经通关 ...

  3. javascript超过容器后显示省略号效果(兼容一行或者多行)

    javascript超过容器后显示省略号效果       在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...

  4. javascript实现汉诺塔动画效果

    javascript实现汉诺塔动画效果 当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...

  5. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  6. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  7. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  8. 使用Photoshop实现雪花飘落的效果

    一.准备工作 软件环境:PhotoshopCS5 实验目的:雪花飘落的效果 二.实验步骤 1,打开素材图片并将原图层复制 2,在菜单栏内选择:滤镜->像素化->点状化,单元格大小选6  提 ...

  9. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. SharePoint 2013 数据库中手动更新用户信息

    在SharePoint的使用过程中,尤其是Windows认证的情况下,而且没有配置用户配置文件服务,经常会出现如果更新AD中的用户信息(包括名字.显示名.邮件等),SharePoint这边站点并不会更 ...

  2. Objective-C 快速入门--基础(二)

    1.什么是继承?OC中的继承有哪些特点? “继承”是面向对象软件技术当中的一个概念.如果一个类A继承自另一个类B,就把这个A称为"B的子类",而把B称为"A的父类&quo ...

  3. 在android用Get方式发送http请求

    烦人的日子终于过去啦,终于又可以写博客啦,对自己的android学习做个总结,方便以后查看...... 一.在android用Get方式发送http请求,使用的是java标准类,也比较简单. 主要分以 ...

  4. swift 2.2 语法 (中)

    前言: 1.此文中的语法会根据Swift的升级变动而更新. 2.如果需要请移步 -> swift2.2 语法(上).swift 2.2语法(下) 函数 和C语言一样,swift也有函数,性质和我 ...

  5. Mac&nbsp;常用快捷键

    Command+Tab 任意情况下切换应用程序 - 向前循环 Shift+Command+Tab 切换应用程序 - 向后循环 Command+Delete 把选中的资源移到废纸篓 Shift+Comm ...

  6. 【CoreData】分页查询和模糊查询

    在CoreData实际使用中,分页查询和模糊查询是必不可少的,接下来演示一下: 首先 // 1.创建模型文件 (相当于一个数据库里的表) // New File ———— CoreData ———— ...

  7. 自定义Dialog宽度占满屏幕

    一.自定义Dialog继承Dialog public class MyDialog extends Dialog { 二.为Dialog设置样式 在style中建立新样式继承 @android:sty ...

  8. iOS学习19之OC类的扩展

    为一个类扩展功能:1.子类化:2.修改源代码:3.定义协议:4.Category:类目 1.Category 1> Category的作用 Category:也叫分类,类目,是为没有源代码的类扩 ...

  9. iOS开发之Runtime使用

    runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C语言,函数的调用在编译的时候会决定调用哪个函数. 对于OC的函数,属于动态 ...

  10. Genome2D编译方法

    Genome2D是一个高效的2D引擎,现在支持Flash(stage3d)和HTML5,因为只有作者一个人在维护,就没开源代码. 最近和作者沟通了下,已经开源啦. 作者划分了几个模块,编译起来不是特别 ...