手写简单的jQuery雪花飘落效果实例


Posted in jQuery onApril 22, 2018

前言

最近闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学。先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿来用了,改起来更是容易。

<!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>

上面是代码,是不是很简单,你们该说了能做到想要的效果吗?下面就让你们看看效果

手写简单的jQuery雪花飘落效果实例

上面就是效果了,可以把雪花换成钱或者其他东西,背景也可以改变一下,然后加个圣诞老人图片,以及其他的,这样就是一个简单的圣诞页面了,其实也是很酷的。

当然我们也可以加点其他的交互效果,把图片换成小飞机,然后做个打飞机的网页游戏,其实也是很简单的,只需在这个上面增加交互和一些逻辑就行了。下面我就给大家一步一步的讲解一下整个程序设计的思路。

前提摘要:  我这个用了jq,当然也可以用原生写,只是jq比较省事,所以就用了jq。

首先引入jq:    <script src="jquery-1.8.3.min.js"></script>   这个需要根据自己的真实目录来写,引入的时候注意两点:

一、记住一般引入的话最好放到整个页面的最下面,因为在页面加载的时候是从上往下加载的,如果jq引入的时候在样式的上面就会使得页面加载速度慢,影响用户体验,所以放在下面就会使得先加载样式和图片,有利于用户体验。

二、引入的时候不要放到依赖jq代码的下面,因为页面加载从上往下加载,要是放到下面的话就会使得依赖的代码找不到jq变量和方法,就会报错。

二、在写之前先想一下需要的变量,然后定义一下变量:

手写简单的jQuery雪花飘落效果实例

我们做的是雪花飘落,所以我用*好来代替雪花,所以我们就要知道定义一个雪花,var flak = $("<div class='xh'></div>").css({position:"absolute","top":"0px"}).html("❉"); //定义一个雪花 ,然后我们要想一下雪花的属性,知道雪花的几个属性。

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

var sizeflak = minSize+Math.random()*(maxSize-minSize); //产生大小不等的雪花

2、定义一下间隔执行函数的间隔,这个也可以不定义,直接写上也行

3、定义一下雪花的自身固定属性颜色,定义一下视图的宽度。

三、根据之前定义变量引入到间隔循环函数内:

手写简单的jQuery雪花飘落效果实例 

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

jq的克隆是节点直接.clone() ,是封装好的js克隆方法。js就是直接节点.cloneNode(true) ,只需要知道就行了,这样就不会过于依赖jq库了。

最后一步 :将克隆好的节点放入到我们的父节点中,也就是视图中,我们这里的视图是body,所以直接appendto(body) ,然后jq有个动画api,我们直接用这个api使得整个雪花从克隆出来到运动起来,然后运动完

  后将克隆出来的雪花remove掉,这样就实现了整个雪花飘落的效果。

手写简单的jQuery雪花飘落效果实例

总结 :这个页面的交互不多,但是也包含了一些知识点,总结一下用到了那些关键技术。

1、雪花随机飘落和随机大小      Math.random()产生0-1的随机数

2、间隔执行函数的运用           setInterval(function(){},时间间隔)

3、jq的动画函数      animate

4、克隆和删除节点  clone()   remove()

花了一个中午先是花了半小时从构思到写出这个dom,然后一点一点讲解出来这个构思过程,以及逻辑思维,转眼12点了,自己的语言组织能力和打字功底有待提高。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
关于jquery layui弹出层的使用方法
Apr 21 #jQuery
jQuery中的for循环var与let的区别
Apr 21 #jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 #jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 #jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 #jQuery
You might like
PHP的explode和implode的使用说明
2011/07/17 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python实现电脑自动关机
2018/06/20 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Python @property及getter setter原理详解
2020/03/31 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
中职三好学生事迹材料
2014/08/24 职场文书
儿园租房协议书范本
2014/12/02 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis