jQuery让控件左右移动的三种实现方法

更新时间：2013年09月08日 14:40:27 作者：

常用的方法就是把控件的CSS position属性设置为relative或 absolute，大家也可以学习下本文提供的其他方法

方法一
【注】需把控件的 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> 

效果图

您可能感兴趣的文章:

jq选项卡鼠标延迟的插件实例
jq选项卡鼠标延迟的插件实例，需要的朋友可以参考一下
2013-05-05
jQuery时间验证和转换为标准格式的时间格式
本篇文章主要介绍了jQuery时间验证和转换为标准格式的时间示例代码，具有一定的参考价值，有兴趣的可以了解一下。
2017-03-03
jquery获取img的src值实例介绍
在本篇文章里小编给大家分享了关于jquery获取img的src值实例介绍和相关内容，有需要的朋友们学习下。
2019-01-01
jQuery实现带动画效果的二级下拉导航方法
这篇文章主要介绍了jQuery实现带动画效果的二级下拉导航方法,涉及jQuery操作css样式及鼠标事件的技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
jQuery中调用WebService方法小结
以前在写ajax请求时，总是喜欢使用jQuery+ashx的方式进行调用，今天采取jQuery+WebService的方法来做ajax请求，发现这种方式比使用ashx的方式要更方便。
2011-03-03
滚动图片效果 jquery实现回旋滚动效果
jquery滚动图片效果,有些新手朋友可能不是很清楚，今天在网上找到一款回旋滚动效果，拿出来和大家一起分享，感兴趣的朋友可以了解下哦
2013-01-01
使用jQuery实现验证上传图片的格式与大小
在项目中，我们经常要遇到上传图片，这就需要我们必须要验证图片的格式与大小，那么如何来操作呢，今天就给大家分享一个非常简单的jQuery验证上传图片的格式与大小的代码。
2014-12-12
jQuery中nextUntil()方法用法实例
这篇文章主要介绍了jQuery中nextUntil()方法用法,实例分析了nextUntil()方法的功能、定义及匹配同辈元素的技巧与注意事项,需要的朋友可以参考下
2015-01-01
jQuery中height()方法用法实例
这篇文章主要介绍了jQuery中height()方法用法,以实例形式较为详细分析了height()方法返回元素高度的用法与相关注意事项,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery基本筛选选择器实例代码
这篇文章主要为大家详细介绍了jQuery基本筛选选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02