<!DOCTYPE?html>
<html>
????<head>
????????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????????<title>jQuery動(dòng)畫特效</title>
????????<script?src="http://libs.baidu.com/jquery/1.9.0/jquery.js"?type="text/javascript"></script>
????????<style>
????????div{position:relative;
????????????width:80px;
??????height:80px;
??????border:?solid?1px?#ccc;
??????margin:?10px?8px;
??????background-color:?Red;
??????color:White;
??????vertical-align:middle}
????????</style>
????????<script>
???$(function(){
????$("#btn1").bind("click",function(){
?????$("div").animate({
?????left:"-=50px"
?????},3000
?????)
????});
????$("#btn2").bind("click",function(){
?????$("div").animate({
?????left:"+=50px"
?????},3000
?????)
????});
???})
????????</script>
????</head>
????
????<body>
????????<div></div>
????????<input?id="btn1"?type="button"?value="左移"?/>
????????<input?id="btn2"?type="button"?value="右移"?/>
????</body>
</html>
2016-03-24
因?yàn)槟愕暮凶映^了網(wǎng)頁的左邊距，可以在style里為你的盒子寫一個(gè)left：100px