jQuery让控件左右移动的三种实现方法-Web前端之家

方法一
【注】需把控件的 CSS 的 position 属性设置为 relative 或 absolute。

<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$("#right1").click(function(){ 
$(".block1").animate({left: '+=50px'}, "slow"); 
}); 
$("#left1").click(function(){ 
$(".block1").animate({left: '-=50px'}, "slow"); 
}); 
}); 
</script> 

方法二

复制代码代码如下:

<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$("#right2").click(function(){ 
$(".block2").css("margin-left","+=50px"); 
}); 
$("#left2").click(function(){ 
$(".block2").css("margin-left","-=50px"); 
}); 
}); 
</script> 

方法三

复制代码代码如下:

<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$("#right3").click(function(){ 
$(".block3").animate({width:"+=50px"}, 222); 
}); 
$("#left3").click(function(){ 
$(".block3").animate({width:"-=50px"}, 222); 
}); 
}); 
</script> 

全部代码

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script language="javascript"> 

$(document).ready(function(){ 
$("#right1").click(function(){ 
$(".block1").animate({left: '+=50px'}, "slow"); 
}); 
$("#left1").click(function(){ 
$(".block1").animate({left: '-=50px'}, "slow"); 
}); 

$("#right2").click(function(){ 
$(".block2").css("margin-left","+=50px"); 
}); 
$("#left2").click(function(){ 
$(".block2").css("margin-left","-=50px"); 
}); 

$("#right3").click(function(){ 
$(".block3").animate({width:"+=50px"}, 222); 
}); 
$("#left3").click(function(){ 
$(".block3").animate({width:"-=50px"}, 222); 
}); 
}); 
</script> 
</head> 
<body style="text-align:center;"> 

<button id="left1">«</button> 
<button id="right1">»</button> 
<div class="block1" id="block" style="position:relative;"> 
<img src="img/csdn_res.jpg"/> 
</div> 
<button id="left2">«</button> 
<button id="right2">»</button> 
<div class="block2" id="block"> 
<img src="img/csdn_res.jpg"/> 
</div> 
<button id="left3">«</button> 
<button id="right3">»</button> 
<div class="block3" id="block"> 
<img src="img/csdn_res.jpg"/> 
</div> 
</body> 
</html> 