首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用Jquery队列实现根据输入数量显示的动画

Posted in Javascript onSeptember 01, 2016

先来看看要实现的效果图

利用Jquery队列实现根据输入数量显示的动画

如上面的gif图所示，可以在输入框中，输入要产生的动画的数量，然后点击click me按钮，就产生了效果。产生的效果是通过在数组中预设的几种。这里为了演示方便，没有设置具体的形状，比如可以更换为一些其它的iconfont来实现效果。

实现思路

通过$.queue和$.dequeue来实现动画队列的存取与取出实现效果。首先通过按照input输入的数字来形成对应数量效果对象的数组。然后在把数组存放到$.queue中，最后通过click me按钮触发，一个一个取出动画序列，实现动画。

注意

这里要注意的是，在一个一个取出动画的时候，用到了setInterval，不需要的时候一定要清除计时器，否则会影响序列，不停的取出。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="/jquery-2.1.4.min.js" type="text/javascript"></script>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{
      width: 50px;
      height: 50px;
      border: 1px solid slateblue;
      position: relative;
      left: 750px;
      top: 500px;
    }
    .animate{
      width: 50px;
      height: 50px;
      border: 1px solid skyblue;
      background: slateblue;
      opacity: 0;
      position: absolute;
    }
    .up{
      z-index: 999;
      background: red;
      width: 50px;
      height: 50px;
      border: 1px solid skyblue;

    }
    #btn{
      background: slateblue;
      position: absolute;
      left: 0;
      top: 0;
    }
    .number{
      position: absolute;
      top: 600px;
      left: 740px;
      width: 100px;
      height: 30px;
    }
    #btnTrg{
      background: slateblue;
      width: 100px;
      height: 30px;
      border: 0;
      position: absolute;
      top: 600px;
      left: 600px;
    }
    .result{
      position: absolute;
      top: 600px;
      left: 900px;
      width: 100px;
      height: 30px;
      background: skyblue;
      text-align: center;
    }

  </style>
</head>
<body>
  <div id="content"></div>
  <div class="box">
    <span class="animate1 animate"></span>
    <span class="animate2 animate"></span>
    <span class="animate3 animate"></span>
    <span class="animate4 animate"></span>
    <span class="animate5 animate"></span>
    <span class="animate6 animate"></span>
    <div class="up"></div>
  </div>
  <div id="btn"></div>
  <button id="btnTrg">click me</button>
  <input type="text" class="number" id="num"/>
  <span class="result"></span>
</body>
<script>
  var span1=$(".animate1");
  var span2=$(".animate2");
  var span3=$(".animate3");
  var span4=$(".animate4");
  var span5=$(".animate5");
  var span6=$(".animate6");
  var box=$("#content");
  var btn=$("#btn");
  var btnTrg=$("#btnTrg");
  var input=$("#num");
  var result=$(".result");
  var resultNum=1;
  var ani=[
    function () {
      span1.css({
        background:"red",
        opacity:1
      }).animate({
        left:-300,
        top:-100
      }, function () {
        result.html(resultNum++)
      }).animate({
        left:-50,
        top:-450,
        opacity:0.2
      }, function () {
        $(this).css({
          left:0,
          top:0,
          opacity:0
        })
      })
    },
    function () {
      span2.css({
        background:"blue",
        opacity:1
      }).animate({
        left:-200,
        top:-200
      }, function () {
        result.html(resultNum++)
      }).animate({
        left:-50,
        top:-450,
        opacity:0.2
      }, function () {
        $(this).css({
          left:0,
          top:0,
          opacity:0
        })
      })
    },
    function () {
      span3.css({
        background:"pink",
        opacity:1
      }).animate({
        left:-100,
        top:-300
      }, function () {
        result.html(resultNum++)
      }).animate({
        left:-50,
        top:-450,
        opacity:0.2
      }, function () {
        $(this).css({
          left:0,
          top:0,
          opacity:0
        })
      })
    },
    function () {
      span4.css({
        background:"green",
        opacity:1
      }).animate({
        left:100,
        top:-300
      }, function () {
        result.html(resultNum++)
      }).animate({
        left:50,
        top:-450,
        opacity:0.2
      }, function () {
        $(this).css({
          left:0,
          top:0,
          opacity:0
        })
      })
    },
    function () {
      span5.css({
        background:"orange",
        opacity:1
      }).animate({
        left:200,
        top:-200
      }, function () {
        result.html(resultNum++)
      }).animate({
        left:50,
        top:-450,
        opacity:0.2
      }, function () {
        $(this).css({
          left:0,
          top:0,
          opacity:0
        })
      })
    },
    function () {
      span6.css({
        background:"black",
        opacity:1
      }).animate({
        left:300,
        top:-150
      }, function () {
        result.html(resultNum++)
      }).animate({
        left:50,
        top:-450,
        opacity:0.2
      }, function () {
        $(this).css({
          left:0,
          top:0,
          opacity:0
        })
      })
    }
  ];
  var queue;
  var len=0;
  var flag=0;
  var timer;
  input.on("keyup", function () {
    var result=[];
    var value=input.val();
    len=value;
    if(flag>=len){
      clearInterval(timer);
    }
    if(value<6){
      result =ani.slice(0,value);
      queue=$.queue(box,"animate",result);
    }else if(value>6){
      var num1=Math.floor(value/6);
      var num2=value%6;
      for(var i=0;i<num1;i++){
        result=result.concat(ani);
      }
      result=result.concat(ani.slice(0,num2));
      console.log(result);
      $.queue(box,"animate",result);
    }
  });
  btnTrg.on("click", function () {
    resultNum=0;
    flag=0;
    timer=setInterval(function () {
      flag++;
      console.log(flag);
      $.dequeue(box,"animate");

    },500);
  })
</script>
</html>

总结

以上就是这篇文章的全部内容，感兴趣的朋友们自己运行操作下会更容易理解，如果有疑问可以留言交流，希望这篇文章对大家能有所帮助。

利用Jquery队列实现根据输入数量显示的动画

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
如何写好一个vue组件,老夫的一年经验全在这了（推荐）
May 18 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
JavaScript中子对象访问父对象的方式详解
Sep 01 #Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 #Javascript
老生常谈JavaScript 函数表达式
Sep 01 #Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 #Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 #Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 #Javascript
深入理解jQuery3.0的domManip函数
Sep 01 #Javascript
黑屏(2) Outlook(1) Mysql8(2) tree shaking(1) appdata(1) celery(1) Three.js(1) SeaTable(1) MutationObserver(1) OOP(1)
You might like
cache_lite试用
2007/02/14 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
vue中监听返回键问题
2019/08/28 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
外贸业务员岗位职责
2013/11/24 职场文书
幼儿园家长评语
2014/02/10 职场文书
入党现实表现材料
2014/12/23 职场文书
2015年国庆节慰问信
2015/03/23 职场文书