利用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 相关文章推荐
javascript event 事件解析
Jan 31 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
VueJS实现用户管理系统
May 29 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
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 代码优化的42条建议 推荐
2009/09/25 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php权重计算方法代码分享
2014/01/09 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
Python re模块介绍
2014/11/30 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
加热夹克:RAVEAN
2018/10/19 全球购物
校园门卫岗位职责
2013/12/09 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
人力资源求职信
2014/05/25 职场文书
负责人任命书范本
2014/06/04 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
单位工作证明书格式
2014/10/04 职场文书
投标单位介绍信
2015/05/05 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
爱国电影观后感
2015/06/19 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android
ant design charts 获取后端接口数据展示
2022/05/25 Javascript