【移动应用开发技术】怎么用jQuery实现雪花飘落效果_第1页
【移动应用开发技术】怎么用jQuery实现雪花飘落效果_第2页
【移动应用开发技术】怎么用jQuery实现雪花飘落效果_第3页
【移动应用开发技术】怎么用jQuery实现雪花飘落效果_第4页
免费预览已结束，剩余1页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

【移动应用开发技术】怎么用jQuery实现雪花飘落效果

本文在下为大家详细介绍“怎么用jQuery实现雪花飘落效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用jQuery实现雪花飘落效果”文章能帮助大家解决疑惑，下面跟着在下的思路慢慢深入，一起来学习新知识吧。示例：<!DOCTYPE

html>

<html>

<head>

<meta

charset="UTF-8">

<title>雪花飘落</title>

</head>

<style

type="text/css">

body{background:

black;height:

100%;overflow:

hidden;}

.xh{cursor:

pointer;}

</style>

<body>

<div

class="bk">

</div>

</body>

<script

src="jquery-1.8.3.min.js"></script>

<script

type="text/javascript">

var

minSize

=

5;

//最小字体

var

maxSize

=

50;//最大字体

var

newOne

=

200;

//生成雪花间隔

var

flakColor

=

"#fff";

//雪花颜色

var

flak

=

$("<div

class='xh'></div>").css({position:"absolute","top":"0px"}).html("❉");//定义一个雪花

var

dhight

=

$(window).height();

//定义视图高度

var

dw

=$(window).width();

//定义视图宽度

setInterval(function(){

var

sizeflak

=

minSize+Math.random()*maxSize;

//产生大小不等的雪花

var

startLeft

=

Math.random()*dw;

//雪花生成是随机的left值

var

startopcity

=

0.7+Math.random()*0.3;

//随机透明度

var

endpositionTop=

dhight-100;

//雪花停止top的位置

var

endLeft=

Math.random()*dw;

//雪花停止的left位置

var

durationfull

=

5000+Math.random()*3000;

//雪花飘落速度不同

flak.clone().appendTo($("body")).css({

"left":startLeft

,

"opacity":startopcity,

"font-size":sizeflak,

"color":flakColor

}).animate({

"top":endpositionTop,

"left":endLeft,

"apacity":0.1

},durationfull,function(){

$(this).remove()

});

},newOne);

</script>

</html>上面是代码，是不是很简单，你们该说了能做到想要的效果吗？下面就让你们看看效果上面就是效果了，可以把雪花换成钱或者其他东西，背景也可以改变一下，然后加个圣诞老人图片，以及其他的，这样就是一个简单的圣诞页面了，其实也是很酷的。当然我们也可以加点其他的交互效果，把图片换成小飞机，然后做个打飞机的网页游戏，其实也是很简单的，只需在这个上面增加交互和一些逻辑就行了。下面我就给大家一步一步的讲解一下整个程序设计的思路。前提摘要：

我这个用了jq，当然也可以用原生写，只是jq比较省事，所以就用了jq。首先引入jq:

<scriptsrc="jquery-1.8.3.min.js"></script>

这个需要根据自己的真实目录来写，引入的时候注意两点：一、记住一般引入的话最好放到整个页面的最下面，因为在页面加载的时候是从上往下加载的，如果jq引入的时候在样式的上面就会使得页面加载速度慢，影响用户体验，所以放在下面就会使得先加载样式和图片，有利于用户体验。二、引入的时候不要放到依赖jq代码的下面，因为页面加载从上往下加载，要是放到下面的话就会使得依赖的代码找不到jq变量和方法，就会报错。二、在写之前先想一下需要的变量，然后定义一下变量：我们做的是雪花飘落，所以我用*好来代替雪花，所以我们就要知道定义一个雪花，varflak=$("<divclass='xh'></div>").css({position:"absolute","top":"0px"}).html("❉");

//定义一个雪花，然后我们要想一下雪花的属性，知道雪花的几个属性。1、我们知道下雪的时候雪花的大小是不一样的，所以我们在定义雪花大小的时候要用个最大雪花和最小雪花的尺寸，在js指定间隔执行函数setinterval中我们用了随机数，使得雪花随机生成在最大的到最小的之间的尺寸：

varsizeflak=minSize+Math.random()*（maxSize-minSize）;

//产生大小不等的雪花2、定义一下间隔执行函数的间隔，这个也可以不定义，直接写上也行3、定义一下雪花的自身固定属性颜色，定义一下视图的宽度。三、根据之前定义变量引入到间隔循环函数内：

到了这一步就简单的多了，因为这个函数是每隔多少秒执行一次，所以我们只需要把之前定义的东西都取最大值和最小值之间就行了。然后将之前定义的雪花克隆一下，这里讲一下jq的克隆和js的克隆jq的克隆是节点直接.clone()

,是封装好的js克隆方法。js就是直接节点.cloneNode(true)

,只需要知道就行了，这样就不会过于依赖jq库了。最后一步：将

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论