1-2 基础实践题
本节编程练习不计算学习进度，请电脑登录imooc.com操作

基础实践题

使用CSS样式与jQuery分步骤实现抢车位动画效果

任务

CSS样式定位车图片位置

1、在style.css文件中的11行，输入下面代码：

position: absolute;

2、在style.css文件中的12行，输入下面代码：

top: 0;

3、在style.css文件中的13行，输入下面代码：

left:720px;

 

用jQuery代码让车动起来

1、在script.js文件中的3行，输入下面代码：

$(".car").animate({left:'0px'},{duration:300});

2、在script.js文件中的5行，输入下面代码：

$(".car").animate({left:'720px'},{duration:300});
index.htmlscript.jsstyle.css 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4. 		<title>停车动画</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.    		<link href="style.css" rel="stylesheet" type="text/css">
  7. 		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  8. 		<script type="text/javascript" src="script.js"></script>
  9. 	</head>
  10. 	<body>
  11.         <div class="boxgrid">
  12.             <img class="car" src="http://img1.sycdn.imooc.com//5343d553000107a107200701.jpg" width="350" height="341"/>
  13.             <img src="http://img1.sycdn.imooc.com//5343d56b0001ccfb07200701.jpg" width="350" height="341"/>
  14.         </div>
  15. 	</body>
  16. </html>
  1. $(document).ready(function(){
  2. 	  $('.boxgrid').hover(function(){
  3.  
  4. 	  }, function() {
  5.  
  6. 	  });	  
  7. });
  1. *{ padding:0px; margin:0px; }
  2. body{ 
  3.     background:#D5DEE7; 
  4. }
  5. .boxgrid{ 
  6.     width: 720px; 
  7. 	height: 701px; 
  8. 	border: solid 2px #8399AF; 
  9. }
  10. .boxgrid img.car{ 
  11.  
  12.  
  13.  
  14. }
下一节