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

2024-12-02 17:11:11

先来看看效果图

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

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($);

效果：

这说明引入成功了。

2.直接用浏览器验证

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

输入$

回车！

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

4. onmouseover事件

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

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

划上去：

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

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

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

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

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

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

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

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

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

本文简单地介绍了一下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阻止事件冒泡

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. <style>
浅谈jquery之on()绑定事件和off()解除绑定事件

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数参数描述 events 可选/S
通过jquery实现页面的动画效果(实例代码)

有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动
jQuery Ajax 加载数据时异步显示加载动画

ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画
jQuery实现删除li节点的方法

废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <meta charset="utf-8"> <title></title> <style> ul { list-style: none; } li { line-height: 25px; margin-top: 3px; } li:hover { background-color: #ddd; } li.hover { backg
基于jQuery的select下拉框选择触发事件实例分析

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1
详解jQuery中的事件

大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 jQuery中的事件加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onload方法必须在DOM树加载完和图片都加载完
asp.net创建事务的方法

1.建立List用于存放多条语句 /// <summary> /// 保存表单 /// </summary> /// <param name="context"></param> protected void save() { List<string> list = new List<string>(); list.Add(string.Format("insert into picsone(model,
解决同一页面中两个iframe互相调用jquery,js函数的方法

这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: <iframe width="100%" height="100%" name="left" scrolling="auto" frameborder="0" src="b.html" id="left">&
jQuery实现字符串全部替换的方法

本文实例讲述了jQuery实现字符串全部替换的方法.分享给大家供大家参考,具体如下: 与C# String类型的Replace方法不同,jQuery的Replace仅能替换第一个匹配的内容. 例如: var str = "a<br/>b<br/>c<br/>"; var Newstr = str.Replace("<br/>", ""); alert(Newstr); //内容为:ab<br/
原生js实现jquery函数animate()动画效果的简单实例

通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参
JQuery实现DIV其他动画效果的简单实例

1.toggle 切换对象的隐藏和显示,可以用来代替show和hide <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

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

相关推荐

随机推荐