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

利用jQuery的动画函数animate实现豌豆发射效果

Posted in Javascript onAugust 28, 2016

先来看看效果图

利用jQuery的动画函数animate实现豌豆发射效果

豌豆射手，草坪还有子弹都是现成的图片，

1. jQuery是库还是框架？

jQuery可以说是现在最流行的一个js类库，而非框架。

之前在知乎上看到有人说了这样一句话：

You call library. Framework calls you.

我深以为然，字面意思大概就是你可以无约束地使用类库，却需要在各种限制条件下使用一个框架。

我私以为，js 库指的是直接和document文档元素交互的一个API，你可以直接引用库，让它为你服务。而框架是偏向于架构的层次，你如果想要使用框架，就必须按照它的规则来。比如angular.js，它就给你提供方法的同时还约束了dom文档结构。

拿Java的三大框架来说，也是如此，你要想使用Spring，就得按照它的步骤来，就好像一个房子，钢筋水泥已经弄好，你只需要进去装修就OK了。而库，就有点类似于StringUtils的韵味，除了它暴露出来的接口，其他你都无需关心，直接调用就行了。

2. jQuery的animate函数

animate()函数用于执行一个基于css属性的自定义动画

基本用法：

$('#id').animate(css,time,callback);

     css : 你需要最终实现的样式列表

     time: 过渡的时间

     callback: 回调函数

animate函数的作用主要就是实现一些css样式的过渡效果。

3.引入 jQuery

比如，现在我有一个div盒子。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
   #box {
    width: 300px;
    height: 300px;
    background:greenyellow;
   }
  </style>
 </head>
 <body>
  <div id='box'></div>
 </body>

 <script>

 </script>

</html>

在上面的代码中，我们引入了百度提供的jQuery文件。

那么如何快速判断是否引入成功了呢？提供以下几个方法：

1.console.log($);

效果：

利用jQuery的动画函数animate实现豌豆发射效果

这说明引入成功了。

2.直接用浏览器验证

打开你的页面，按一下F12，出现这样的控制台，这是浏览器自带的（我这里使用的是谷歌浏览器）。

利用jQuery的动画函数animate实现豌豆发射效果

输入$

利用jQuery的动画函数animate实现豌豆发射效果

回车！

利用jQuery的动画函数animate实现豌豆发射效果

诶，这样是不是也可以呢？

4. onmouseover事件

我们来给div盒子添加一个鼠标划上去的事件。

$('#box').on('mouseover',function(){
 alert();
});

划上去：

利用jQuery的动画函数animate实现豌豆发射效果

嗯，最起码，这说明我们到目前为止的代码都是正确的，我初学js的时候就喜欢这样，让我感觉每一行代码都写得很放心。

5.用animate函数改变盒子宽度和高度

我们把alert去掉，加上下面的代码：

$('#box').on('mouseover',function(){
 $('#box').animate({width:600},500);
});

这表示当我把鼠标画上去的时候，就改变宽度为600px，过渡时间为500毫秒。

利用jQuery的动画函数animate实现豌豆发射效果

如果我们希望在宽度加倍后，令高度也加倍，又该如何做呢？

对了，用回调函数，当第一个动画执行完毕，就继续执行下一个动画：

$('#box').on('mouseover',function(){
 $('#box').animate({width:600},500,function(){
  $('#box').animate({height:600},500);
 });
});

利用jQuery的动画函数animate实现豌豆发射效果

这样就有了一个先后顺序。

本文简单地介绍了一下jQuery animate函数的使用。

6. 附录

最后，附上一开始案例的代码，除了animate函数，还用到了js的定时器setInterval方法：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <style type="text/css">
   body {
    background: url(background1.jpg) no-repeat;
    position: fixed;
   }
   ul li {
    list-style: none;
   }
   .wrap {
    position: relative;
    left: 170px;
    top: 65px;
   }
   .plants1 {
    display: inline-block;
    position: relative;
    left:35px;
   }
   .plants1 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants1 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }

   .plants2 {
    display: inline-block;
    position: relative;
    left:2px;
   }
   .plants2 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants2 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }

   .plants3 {
    display: inline-block;
    position: relative;
    left:-40px;
   }
   .plants3 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants3 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
  </style>
 </head>
 <body>
  <div class='wrap'>
   <ul class='plants1'>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>

   </ul>

   <ul class='plants2'>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>

   </ul>

   <ul class='plants3'>

    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript">

  function randomNum(num){
   return Math.floor(Math.random()*(num+1));
  };

  setInterval(function(){
   var $this = $('.PB00').eq(randomNum(17));
   $this.animate({'margin-left' : 1000},2000,function(){
    $this.css({'margin-left' : 0});
   });
  },10);

 </script> 

</html>

总结

以上就是这篇文章的全部内容，希望对大家的学习和工作能有所帮助。如果有疑问可以留言交流，谢谢大家对三水点靠木的支持。

利用jQuery的动画函数animate实现豌豆发射效果

- Author -

daisy

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

Javascript 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
JS上传图片预览插件制作（兼容到IE6）
Aug 07 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
教你如何在Node.js中使用jQuery
Aug 28 #Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 #Javascript
Node.js 日志处理模块log4js
Aug 28 #Javascript
node.js中 stream使用教程
Aug 28 #Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 #Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 #Javascript
ionic实现带字的toggle滑动组件
Aug 27 #Javascript
feDisplacementMap(1) Pool(1) Tkinter(4) Hudi(1) 数据处理(2) sortInts(1) GUI(2) WebSockets(3) apply(1) agg(1)
You might like
玩转虚拟域名◎＋ .
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
一个捕获函数输出的函数
2007/02/14 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python爬虫请求头设置代码
2020/07/28 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
Omio葡萄牙：全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
亚洲最大的运动鞋寄售店：KicksCrew
2020/11/26 全球购物
运动会解说词100字
2014/01/31 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
西双版纳导游词
2015/02/03 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
行政上诉状范文
2015/05/23 职场文书
音乐剧猫观后感
2015/06/04 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
python执行js代码的方法
2021/05/13 Python
基于Python实现对比Exce的工具
2022/04/07 Python