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

总结

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

Javascript 相关文章推荐
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
微信小程序单选框自定义赋值
May 26 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
You might like
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
php中使用sftp教程
2015/03/30 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
Python群发邮件实例代码
2014/01/03 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
python与C互相调用的方法详解
2017/07/14 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
J2EE包括哪些技术
2016/11/25 面试题
会计专业自荐信
2013/12/02 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
团员个人年度总结
2015/02/26 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
Hive日期格式转换方法总结
2022/06/25 数据库