<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>停车动画</title>
<script type="text/ecmascript" src="jquery-1.3.1.js"></script>
<script type="text/ecmascript">
$(document).ready(function(){
$('.boxgrid').hover(function(){
$("car").animate({left:'0px'},{duratin:300});
},function(){
$(".car").animate({left:'720px'},{duration:300});
});
});
</script>
<style type="text/css">
*{ padding:0px; margin:0px; }
body{
background:#D5DEE7;
}
.boxgrid{
width: 720px;
height: 701px;
border: solid 2px #8399AF;
position:relative;
}
.boxgrid img.car{
position: absolute;/*设置绝对定位*/
top: 0;
left:720px;
}
</style>
</head>
<body>
<div class="boxgrid">
<img class="car" src="抢车位动画制作(源代码)/car.png" width="720" height="701" />
<img src="抢车位动画制作(源代码)/carport.png" width="720" height="701" />
</div>
</body>
</html>
为什么没有滑动效果,看了一天了还是不懂