手写简单的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 zTree树插件动态加载实例代码
May 11 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 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禁止个别IP访问网站
2013/10/30 PHP
php检测文本的编码
2015/07/26 PHP
php如何获取文件的扩展名
2015/10/28 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php-msf源码详解
2017/12/25 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
比较搞笑的js陷阱题
2010/02/07 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[00:35]可解锁地面特效
2018/12/20 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python机器学习之神经网络(一)
2017/12/20 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python next()和iter()函数原理解析
2020/02/07 Python
什么是python的必选参数
2020/06/21 Python
跟单文员的岗位职责
2013/11/14 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书