首页
所有分类
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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
jquery实现网页定位导航
Aug 23 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
教你如何在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
慢日志(1) Switch(1) REST(1) cmd(1) exists(2) Spring Bean(1) openEuler(1) Spring JPA(1) 远程桌面(2) mt-swipe(1)
You might like
控制PHP的输出：缓存并压缩动态页面
2013/06/11 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
JsDom 编程小结
2011/08/09 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
javascript事件的绑定基础实例讲解（34）
2017/02/14 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
详解vue 命名视图
2019/08/14 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
举例详解Python中yield生成器的用法
2015/08/05 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
Notino匈牙利：购买香水和化妆品
2019/04/12 全球购物
Schecker荷兰：狗狗用品和配件
2019/06/06 全球购物
微软马来西亚官方网站：Microsoft马来西亚
2019/11/22 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
入党思想汇报
2014/01/05 职场文书
九年级英语教学反思
2014/01/31 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
中学生运动会广播稿
2015/08/19 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis