这是利用代码来模拟驾照考试中的科目二考试的半坡停车，通过这个可以进行科目二模拟训练。这是是通过按键盘的上下左右的进行汽车的移动的，按W或者S调整车子的方向。
效果图：
HTML中的类为Cat的div对应的就是红色的小汽车，其他的div就是一些黄色的停车线，以及一些样式，其中的Ul标签是坡道中间的两条黄色的虚线，里面的每一个li标签就是一小块黄色的线段。
div中的Style是我给这些线设置的一些简单的样式，不过主要的样式还是在CSS部分中，也是为了能更好的单独设置其中的某个标签的样式。
HTML部分：
下面就是CSS的部分，基本上都是给div设置一些宽、高，以及背景颜色还是位置等等的各种的样式，以及为了不让汽车的移动而影响到其他标签的样式，所以在这里用的定位的方法全部都是position: fixed这个固定定位，ul li是坡道两条虚线的样式，Cat是设置汽车的样式，Text是设置在页面当中提示用户如何操作的文字的样式。
CSS部分：
再接下来就是JQuery的部分，在写JQuery代码之前要引入JQuery的脚本文件。然后就是设置键盘按下事件，上下左右的键码值分别对应的是38、40、37、39，W对应的是87、S对应的83。
按下W键的时候，汽车的会顺时针倾斜30度，并且会向左上角的方向移动，因为向左上角移动的距离我给的是固定的值，所以为了达到效果需要在按住W键的同时按上下左右来调整位置。然后就是设置W键的松开事件，松开W键后会把移动的距离添加到用来的位置上，以达到在松开W键时，汽车的位置不会发生变化。
JQuery部分：
等到汽车移动到最上面的距离时按下S键就可以回正汽车的方向，因为这里只需要调整汽车方向即可，无需进行其他操作，所以就只设置按下事件就可以了，不需要设置S键的松开事件。
模拟科目二半坡停车
猜你喜欢
转载自blog.csdn.net/weixin_44542115/article/details/89631108
今日推荐
周排行