使用CSS样式与jQuery分步骤实现车动画向下开动效果
要求:
1、单击车图片,车图片向下移动500px,移动时间设置600微秒。
CSS样式定位车图片位置
1、为使车可以动起来,首先使用position、top、left进行定位。
用jQuery代码让车动起来
1、鼠标滑过图片事件写好。
2、鼠标滑过图片后触发动作:车图片向下移动(使用animate方法改变top属性实现动画)。
<!DOCTYPE html> <html> <head> <title>停车动画</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <img class="car" src="http://img1.sycdn.imooc.com//5343d553000107a107200701.jpg" width="350" height="341"/> </body> </html>
$(document).ready(function(){ });
*{ padding:0px; margin:0px; } body{ background:#D5DEE7; } .car{ }