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'

});

});


阅读更多
文章标签: jQuery animate
个人分类: web 前端框架
想对作者说点什么? 我来说一句
相关热词

没有更多推荐了,返回首页

关闭
关闭
关闭