原作者是在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. APP One Link ,android and ios qrcode merge as One QRCode and one short link

    Adroid and ios qrcode merge as One QRCode and one short link is publish , the web site is www.appone ...

  2. 检查sqlite数据库完整性

    最近遇到一个问题,用户数据丢失,拿到用户数据库文件以后,发现数据库损坏. database disk image is malformed 因此希望可以找到一种方法,可以检测出来数据库是否损坏,经过g ...

  3. android MediaPlayer API大全已经方法详解(转载)

    通过这张图,我们可以知道一个MediaPlayer对象有以下的状态: 1)当一个MediaPlayer对象被刚刚用new操作符创建或是调用了reset()方法后,它就处于Idle状态.当调用了rele ...

  4. 基于微软平台IIS/ASP.NET开发的大型网站有哪些?

    首先说明一下,本文绝不是要说Microsoft平台多么好,多么牛.只是要提醒一些LAMP/Java平台下的同志们,微软平台不至于像你们说的,和想象的那么不堪!只是你们自己不知道而已.同时,也希望广大M ...

  5. css浮动

    一.浮动介绍 历史: 浮动属性产生之初是为了实现“文字环绕”的效果,让文字环绕图片在网页实现类似word中“图文混排”. 定位方式: 浮动让元素脱离正常流,向父容器的左边或右边移动直到碰到包含容器的边 ...

  6. Nexus Repository Manager 3.0 发布

    著名仓库管理工具Nexus,在2016年4月6日发布3.0版本(包括OSS版),相较2.*版本有很大的改变: 1. 从底层重构,从而提高性能,增强扩展能力,并改善用户体验 2. 升级界面,增加更多的浏 ...

  7. 华为S5700S-52P-LI-AC千兆网管交换机web登录界面配置

    研究一下午,包装附的说明书根本就是错误的,通过技术售后和官方的文档结合,总算可以登录交换机的web管理界面. 首先需要使用通讯控制线缆(包装中附)连接电脑和交换机,一头接交换机的Console口,一头 ...

  8. 谈一次php无限极分类的案例

    作者:白狼 出处:http://www.manks.top/php_tree_deep.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追 ...

  9. LinkedHashMap及其源码分析

    以下内容基于jdk1.7.0_79源码: 什么是LinkedHashMap 继承自HashMap,一个有序的Map接口实现,这里的有序指的是元素可以按插入顺序或访问顺序排列: LinkedHashMa ...

  10. mybatis 中#{}与${}的区别

    1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111&qu ...