html代码部分
<!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://img.mukewang.com/5343d553000107a107200701.jpg" width="350" height="341"/>
</body>
</html>
css样式布局
*{ padding:0px; margin:0px; }
body{
background:#D5DEE7;
}
.car{
position:absolute;
top:0px;
left:0px;
}js代码
$(document).ready(function(){
$(".car").mouseover(function(){
$(this).animate({top:'300px'},{duration:"300"});
});
$(".car").mouseout(function(){
$(this).animate({top:'0px'},{duration:"300"});
});
});jQuery可以很方便的获取到html结构中的某一个元素。
$(document).ready(function(){ //表示整个文档代码结构加载完毕
$(".car").mouseover(function(){ //鼠标移入
$(this).animate({top:"300px"},{duration:"300"});
});
$(".car").mouseout(function(){ //鼠标移除
$(this).animate({top:"0px"},{duration:"300"});
});
});
jQuery的事件方法------》事件方法会触发匹配元素的事件，例如：$(button#demo).click(function(){ alert("okkkkkk"); });
更多事件方法介绍
animate动画
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
params:必选项，参数定义的形成动画css属性；
speed:可选，用于设定完成动画所需的时长；
callback:可选，动画完成后所执行的返回函数名称。
$("button").click(function(){
$("#div").animate({left:"200px"});
});
jQuery animate（）动画操作多个属性
$("button").click(function(){
$("#div").animate({
left:'200px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
扫一扫
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
