首页
所有分类
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 相关文章推荐
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
dataBinding(1) 反射(1) scrapy(1) DeOldify(1) 注解(1) Quartz(1) ip2region(1) Postman(1) virtualenv(1) BottomSheetDialog(1)
You might like
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php计算整个目录大小的方法
2015/06/01 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php compact 通过变量创建数组
2016/11/15 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
php array_map()函数实例用法
2021/03/03 PHP
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python批量生成本地ip地址的方法
2015/03/23 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python 全局变量的import机制介绍
2017/09/07 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python 表格打印代码实例解析
2019/10/12 Python
Django 路由层URLconf的实现
2019/12/30 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
美国婴儿和儿童服装购物网站：PatPat
2020/10/01 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
特岗教师个人总结
2015/02/10 职场文书
个人总结怎么写
2015/02/26 职场文书
员工升职自荐信
2015/03/27 职场文书
初中思品教学反思
2016/02/20 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers