停车场鼠标移动泊车
今天在慕课网学习到“停车场鼠标移动泊车”这个小动画的制作，在此与大家分享一下。
首先，我们要准备两张图片素材，车辆的图片还有停车场的图片。以下两张图是车停好之前和停好之后的图片，整个过程是靠紫红色车辆的左右移动实现车辆进出停泊过程。首先，我们先定义整体页面的html。
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<title>停车动画</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css.css" rel="stylesheet" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="grabCarport.js"></script>
</head>
<body>
<div class="boxgrid">
<img class="car" src="car.png"/>
<img src="carport.png"/>
</div>
</body>
</html>
接着，我们对页面的样式进行定义，需要注意的是，对车辆的posistion要设置为绝对定位，这样车辆才可以左右移动，css代码如下：
*{ padding:0px; margin:0px; }
body{
background:#D5DEE7;
}
.boxgrid{
width: 720px;
height: 701px;
border: solid 2px #8399AF;
}
.boxgrid img.car{
position: absolute;/*设置绝对定位*/
top: 0;
left:720px;
}
最后，就是用一段简单的js来实现车辆左右移动的过程了，js代码如下：
$(document).ready(function(){
$('.boxgrid').hover(function(){
$(".car").animate({left:'0px'},{duration:300});
}, function() {
$(".car").animate({left:'720px'},{duration:300});
});
});
拓展练习：设计js函数实现车辆的上下移动，使得车辆在600微秒内从初始位置向下移动500px。
js代码如下：
$(document).ready(function(){
$(".car").hover(function(){
$(".car").animate({top:"0px"},{duration:600});
}, function(){$(".car").animate({top:"500px"},{duration:600});}) ;
})
