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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 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开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
Javascript倒计时代码
2010/08/12 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
vue实现图片预览组件封装与使用
2019/07/13 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
python提取页面内url列表的方法
2015/05/25 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
浅谈Python NLP入门教程
2017/12/25 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
金蝶的一道SQL笔试题
2012/12/18 面试题
团日活动总结范文
2014/04/25 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
党员活动总结
2015/02/04 职场文书
史上最牛辞职信
2015/05/13 职场文书
培训心得体会怎么写
2016/01/25 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript