JS和JQuery实现雪花飘落效果


Posted in jQuery onNovember 30, 2017

很多朋友在做特效网页的时候需要用到雪花飘落的效果,我们这里给大家整理了分别用JS还有JQuery两种代码实现这个效果的方式。

我们先来看一下需要实现的雪花效果:

JS和JQuery实现雪花飘落效果

这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval。

解释

setTimeout()

setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay)

上面代码中,setTimeout函数接受两个参数,第一个参数func|code是将要推迟执行的函数名或者一段代码,第二个参数delay是推迟执行的毫秒数。

setInterval()

setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。

clearTimeout(),clearInterval()

setTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);

注意:

setTimeout 和 setInterval 必须要等到当前脚本的同步任务和“任务队列”中已有的事件,全部处理完以后,才会执行setTimeout指定的任务。

我们继续说实现雪花飘落的效果

主要是以下4步:

1、定义一片雪花模板;
2、设置第一个定时器,周期性定时器,每隔一段时间生成一片雪花;
3、设置第二个定时器,一次性定时器,当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来;
4、设置第三个定时器,当雪花落下后,删除雪花。

上面是实现的思路,下面写出具体的代码,下面的代码是JS原生代码,最后会附上JQuery实现的代码,思路都一样。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: #000;
      /*防止出现向下滚动条*/
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script>
    function snow() {
      //  1、定义一片雪花模板
      var flake = document.createElement('div');
      // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
      flake.innerHTML = '❆';
      flake.style.cssText = 'position:absolute;color:#fff;';

      //获取页面的高度 相当于雪花下落结束时Y轴的位置
      var documentHieght = window.innerHeight;
      //获取页面的宽度,利用这个数来算出,雪花开始时left的值
      var documentWidth = window.innerWidth;

      //定义生成一片雪花的毫秒数
      var millisec = 100;
      //2、设置第一个定时器,周期性定时器,每隔一段时间(millisec)生成一片雪花;
      setInterval(function() { //页面加载之后,定时器就开始工作
        //随机生成雪花下落 开始 时left的值,相当于开始时X轴的位置
        var startLeft = Math.random() * documentWidth;

        //随机生成雪花下落 结束 时left的值,相当于结束时X轴的位置
        var endLeft = Math.random() * documentWidth;

        //随机生成雪花大小
        var flakeSize = 5 + 20 * Math.random();

        //随机生成雪花下落持续时间
        var durationTime = 4000 + 7000 * Math.random();

        //随机生成雪花下落 开始 时的透明度
        var startOpacity = 0.7 + 0.3 * Math.random();

        //随机生成雪花下落 结束 时的透明度
        var endOpacity = 0.2 + 0.2 * Math.random();

        //克隆一个雪花模板
        var cloneFlake = flake.cloneNode(true);

        //第一次修改样式,定义克隆出来的雪花的样式
        cloneFlake.style.cssText += `
            left: ${startLeft}px;
            opacity: ${startOpacity};
            font-size:${flakeSize}px;
            top:-25px;
               transition:${durationTime}ms;
           `;

        //拼接到页面中
        document.body.appendChild(cloneFlake);

        //设置第二个定时器,一次性定时器,
        //当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来;
        setTimeout(function() {
          //第二次修改样式
          cloneFlake.style.cssText += `
                left: ${endLeft}px;
                top:${documentHieght}px;
                opacity:${endOpacity};
              `;

          //4、设置第三个定时器,当雪花落下后,删除雪花。
          setTimeout(function() {
            cloneFlake.remove();
          }, durationTime);
        }, 0);

      }, millisec);
    }
    snow();
  </script>
</body>
</html>

注意:

因为定时器添加的事件,会在下一次Event Loop执行,所以第二个定时器的作用是为了让生成的雪花先拼接到页面中渲染出来后,再修改他的样式,这样才能让他动起来,如果没有这个定时器,浏览器会把所有的JS代码都执行完之后才渲染页面,这样的话后面的样式就直接覆盖前面的样式了,雪花就没法动了,这和浏览器的线程有关系。

简单说,意思就是用了这个定时器,能把两次修改样式的代码分开执行,可以先把第一次修改的样式渲染后,在进行第二次的修改,雪花就会动了。

JQuery版

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: #000;
      /*防止出现向下滚动条*/
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script>
    function snow() {
      //1、定义一片雪花模板
      var flake = $("<div>").css({
        "position": "absolute",
        "color": "#fff"
      }).html("❄");

      //获取页面的宽度,利用这个数来算出,雪花开始时left的值
      var documentWidth = $(document).width();

      //获取页面的高度 相当于雪花下落结束时Y轴的位置
      var documentHieght = $(document).height();

      //定义生成一片雪花的毫秒数
      var millisec = 100;
      //2、设置第一个定时器,周期性定时器,每隔一段时间(millisec)生成一片雪花;
      setInterval(function() {
        //随机生成雪花下落 开始 时left的值,相当于开始时X轴的位置
        var startLeft = Math.random() * documentWidth;

        //随机生成雪花下落 结束 时left的值,相当于结束时X轴的位置
        var endLeft = Math.random() * documentWidth;

        //随机生成雪花大小
        var flakeSize = 5 + 20 * Math.random();

        //随机生成雪花下落持续时间
        var durationTime = 4000 + 7000 * Math.random();

        //随机生成雪花下落 开始 时的透明度
        var startOpacity = 0.7 + 0.3 * Math.random();

        //随机生成雪花下落 结束 时的透明度
        var endOpacity = 0.2 + 0.2 * Math.random();

        //3、克隆一个雪花模板,定义雪花的初始样式,拼接到页面中
        flake.clone().appendTo($("body")).css({
          "left": startLeft,
          "opacity": startOpacity,
          "font-size": flakeSize,
          "top": "-25px",
        }).animate({ //执行动画
          "left": endLeft,
          "opacity": endOpacity,
          "top": documentHieght
        }, durationTime, function() {
          //4、当雪花落下后,删除雪花。
          $(this).remove(); 
        });
      }, millisec);
    };
    snow();
  </script>
</body>
</html>
jQuery 相关文章推荐
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 #jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 #jQuery
jquery animate动画持续运动的实例
Nov 29 #jQuery
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 #jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 #jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
global.php
2006/12/09 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
python访问sqlserver示例
2014/02/10 Python
python操作redis的方法
2015/07/07 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python列表推导式操作解析
2019/11/26 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python tkinter实现连连看游戏
2020/11/16 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
大学生党员自我批评
2014/02/14 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
python数据处理之Pandas类型转换
2022/04/28 Python