利用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>

总结

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

Javascript 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
C++中的string类的用法小结
Aug 07 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
javascript canvas API内容整理
Feb 16 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
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
You might like
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python selenium如何设置等待时间
2016/09/15 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python request 模块详细介绍
2020/11/10 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
股份合作协议书
2014/09/10 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
事业单位考察材料范文
2014/12/25 职场文书
2019教师的学习计划
2019/06/25 职场文书
如何用python反转图片,视频
2021/04/24 Python
Java输出Hello World完美过程解析
2021/06/13 Java/Android