模拟科目二侧方位停车训练

更新时间:2019-04-09 09:43:24点击次数:424次
这是利用代码来模拟驾照考试中的科目二考试的侧方位停车,通过这个可以进行科目二模拟训练。这是是通过按键盘的上下左右的进行汽车的移动的,按W或者S进行汽车的旋转。
效果图:

xHTML中的div1对应的就是红色的小汽车,其他的div就是一些黄色的停车线,以及一些样式,div中的Style是我给这些线设置的一些简单的样式,不过主要的样式还是在CSS部分中,也是为了能更好的单独设置其中的某个标签的样式。

HTML部分:

下面就是CSS的部分,基本上都是给div设置一些宽、高,以及背景颜色还是位置等等的各种的样式,以及为了不让汽车的移动而影响到其他标签的样式,所以在这里为用了position: fixed这个方法,设置它的固定定位,还有要注意一下的就是@keyframes animation的部分,以及A、B两个的CSS部分,虽然A、B两个类基本上差不多一样但是为了JS部分能更好的切换以及能够多次点击就多写了一点。
CSS部分:


再接下来就是JQuery的部分,在写JQuery代码之前要引入JQuery的脚本文件。然后就是就是键盘按下事件,上下左右的键码值分别对应的是38、40、37、39,W对应的是87、S对应的83。通过AddClass给div1添加A或者B的类,达到小汽车旋转的效果,RemoveClass移除添加添加的类,这样就可以实现多次点击而不会影响运行的效果。
JQuery部分:



本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息