1-3 挑战实战题
本节编程练习不计算学习进度,请电脑登录imooc.com操作

挑战实战题

使用CSS样式与jQuery分步骤实现车动画向下开动效果

要求:

1、单击车图片,车图片向下移动500px,移动时间设置600微秒。

任务

CSS样式定位车图片位置

1、为使车可以动起来,首先使用position、top、left进行定位。

用jQuery代码让车动起来

1、鼠标滑过图片事件写好。

2、鼠标滑过图片后触发动作:车图片向下移动(使用animate方法改变top属性实现动画)。

  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. <img class="car" src="http://img1.sycdn.imooc.com//5343d553000107a107200701.jpg" width="350" height="341"/>
  12. </body>
  13. </html>
  1. $(document).ready(function(){
  2.  
  3.  
  4.  
  5.  
  6. });
  1. *{ padding:0px; margin:0px; }
  2. body{
  3. background:#D5DEE7;
  4. }
  5.  
  6. .car{
  7.  
  8.  
  9.  
  10. }
返回课程