利用jQuery的动画功能实现豌豆发射效果

我们先来看看效果图

豌豆射手、草坪和子弹都是现成的图片。

1.jquery是库还是框架？

JQuery是最流行的js类库，不是框架。

我之前在知乎上看到有人说这句话：

你叫图书馆。框架召唤你。

我深深相信字面意思大概是说可以无限制的使用类库，但是需要在各种限制下使用框架。

我个人认为js库指的是直接与文档元素交互的API。你可以直接参考图书馆，让它为你服务。框架偏向于架构层面。如果你想使用这个框架，你必须遵循它的规则。例如angular.js，它为您提供方法并约束dom文档结构。

以Java的三个框架为例。如果你想使用Spring，你必须遵循它的步骤。就像一栋房子，钢筋混凝土已经完工，你只需要进去装修一下。这个库有点类似于StringUtils的魅力，除了暴露的接口，你不需要在意，直接调用就可以了。

2.jQuery的动画功能

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

基本用法：

$('#id ')。动画(css、时间、回调)；Css :最后需要实现的样式列表

时间：转换时间

Callback:回调函数

动画的作用主要是实现css样式的一些过渡效果。

3.介绍jQuery

例如，现在我有一个div框。

！DOCTYPE html html head meta charset=' UTF-8 ' script src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script style type=' text/CSS ' # box { width : 300 px；height: 300px背景：绿色黄色；}/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.使用动画功能更改框的宽度和高度

让我们删除警报并添加以下代码：

$('#box ')。on('mouseover '，function(){ $('#box ')。动画({width:600}，500)；});这意味着当我画鼠标时，我将宽度改为600px，过渡时间为500毫秒。

如果要宽度翻倍，高度翻倍，怎么办？

顺便说一下，使用回调函数，当第一个动画完成时，继续执行下一个动画：

$('#box ')。on('mouseover '，function(){ $('#box ')。动画({width:600}，500，function(){ $('#box ')。动画({height:600}，500)；});});

所以有一个顺序。

本文简要介绍了jQuery动画功能的使用。

6.附录

最后附上初始案例的代码。除了动画功能，还使用了js的timer setInterval方法：

！DOCTYPE html html head meta charset=' UTF-8 '/script type=' text/JavaScript ' src=' http : jquery-1。11 .2 .量滴js '/脚本样式类型=' text/CSS '正文{背景： URL(背景1。jpg)不重复；位置：固定；} ul Li {列表式：无；} .相对包装{ position : left : 170 pxtop : 65px }。S1工厂{显示器：直列式闭塞；相对位置：left :35 px } . plant 1 .植物{位置：相对；边距-底部：20 px} .plants1 .工厂. PB00 {位置：绝对值；top :-2px；left:15px}。工厂2 {显示器：内嵌块；相对位置：left :2 px } . plant 2 .植物{位置：相对；边距-底部：20 px} .plants2 .工厂. PB00 {位置：绝对值；top :-2px；left:15px}。S3工厂{显示器：直列式闭塞；相对位置：左侧：-40px；} .plants3 .植物{位置：相对；边距-底部：20 px} .plants3 .工厂. PB00 {位置：绝对值；top :-2px；left :15 px }/style/head body div class=' wrap ' ul class=' plant 1 ' Li class=' plant ' img class=' Pisoother ' src=' http : img/Pisoother。gif '/img class=' PB00 ' src=' http : img/PB00。gif/Li Li class=' plant ' img class=' Pisoother ' src=' http 3360 img/Pisoothr。gif '/img class='/Li Li class=' plant ' img class=' Pisoother ' src=' http : img/Pisoother。gif '/img class=' PB00 ' src=' http : img/PB00。gif/Li Li class=' plant ' img class=' Pisoother ' src=' http : img/Pisoother。gif '/img class=' PB00 ' src=' http : img '/Li Li class=' plant ' img class=' Pisoother ' src=' http : img/Pisoother。gif '/img class=' PB00 ' src=' http : img/PB00。gif/Li Li class=' plant ' img class=' Pisoother ' src=' http : img/Pisoother。gif '/img class=' PB00 ' src=' http : img ' }；setInterval()函数(){ var $ this=$(。PB00’).等式(randomNum(17))；这个。animate({ ' margin-left ' : 1000 }，2000，function(){ $ this。CSS({ ' margin-left ' : 0 })；});},10);/script /html总结

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