jQuery实现小骑车的移动

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'

});

});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值