使用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笔记4——算法和流程控制
一.循环 for.while.do while三种循环的性能都没有多大区别.foreach 的性能较其他三种差 . 既然循环没有多大区别,注意循环内的代码控制. 减少迭代次数. 减少迭代工作量. 推荐 ...
- Convert.ChangeType不能处理Nullable类型的解决办法
在做一个ORMapping功能的时候发现,Convert.ChangeType不能处理nullable类型,比如int?. 解决办法也很简单,贴出完整的代码(大部分代码来自网络),注意下面代码没经过完 ...
- 浅谈被加壳ELF(即android的so文件)的调试
本文只讨论如何调试被加壳的ELF文件,包括调试中的技巧运用及调试过程中可能遇到的问题的解决方法,不包含如何还原加固的DEX本文将以某加壳程序和某加固为目标. 一.ELF格式简介 ELF全称:Execu ...
- MTK 常见的编译命令
1: ./mk n(r) kernel; ./mk bootimage;当修改build-in 到kernel相关代码时,要使用此命令,具体文件参考如下: alps/kernel/ alps/medi ...
- iOS---TextView显示HTML文本
_checkAllIntroduceTextView = [[UITextView alloc] initWithFrame:CGRectMake(10, 0, kScreenWidth-20, kS ...
- WebMatrix之WebMatrix.Data
WebMatrix之WebMatrix.Data WebMatrix数据访问系列目次: WebMatrix之数据访问 WebMatrix之WebMatrix.Data WebMatrix之WebMat ...
- 8、需求分析师要阅读的书籍 - IT软件人员书籍系列文章
需求分析是软件项目开始阶段重要的一步.而需求分析是项目经理或产品经理需要经历的一环,所以说需求分析是项目经理或产品经理需要具备的知识.但是,项目角色中却分离出了需求分析师这个角色,也就是说,在大型的或 ...
- 更换mysql数据目录后出现ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2) 的解决办法
服务器上的mysql默认数据目录为/var/lib/mysql/,同时服务器的/空间不是很大,而近期又有大量的日志需要导入进行分析,时常搞得/的空间捉襟见肘,晚上一狠心就想把mysql的数据目录转移到 ...
- Jetty 发布web服务
Jetty provides a Web server and javax.servlet container, plus support for HTTP/2, WebSocket, OSGi, J ...
- Servlet/JSP-07 Session应用
Session应用 一. 避免表单重复提交 1. 表单重复提交的情况 ①在表单提交到一个 Servlet,而 Servlet 又通过请求转发的方式响应了一个 JSP 或者 HTML 页面,此时浏览器地 ...