3.2.5　实验步骤

3.2.5　实验步骤

任务1实验分解

（1） 打开HBuilderX 进入开发界面，选择“文件新建项目”菜单，进入新建项目界面。选择普通项目，输入项目名称“ImgMove”，并选择默认项目，点击创建按钮。

（2） 在项目窗口ImgMove上，右键选择“新建html文件”，输入文件名称“index”，点击创建按钮。

（3） 在实验资料与素材中找到图片文件，选中全部图片复制，并粘贴到项目中，如图3.7所示。

图3.7

（4） 在新建文件下，写入如下基础代码。

效果如图3.8所示。

图3.8

（5） 在实验资料与素材中找到jquery-3.4.1.js文件，选中文件复制，并粘贴到项目中，如图3.9所示。

图3.9

（6） 在页面的＜head＞标签里面加上jQuery的引入代码。

（7） 添加一个加载函数。

代码如下：

（8） 分别为页面上的四个按钮创建点击事件，下面演示向上按钮功能，效果如图3.10所示。

图3.10

在上面加载函数中添加向上按钮点击事件代码：

（9） 向下移动，效果如图3.11所示。

图3.11

在上面加载函数中添加向下按钮点击事件代码：

（10） 向左移动，效果如图3.12所示 。

图3.12

在上面加载函数中添加向左按钮点击事件代码：

（11） 向右移动，效果如图3.13所示 。

图3.13

至此完成任务1所有要求。