jQuery讓控件左右移動的三種實(shí)現(xiàn)方法

更新時間：2013年09月08日 14:40:27 作者：

常用的方法就是把控件的CSS position屬性設(shè)置為relative或 absolute，大家也可以學(xué)習(xí)下本文提供的其他方法

方法一
【注】需把控件的 CSS 的 position 屬性設(shè)置為 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> 

方法二

復(fù)制代碼代碼如下:

 
<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> 

方法三

復(fù)制代碼代碼如下:

 
<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> 

全部代碼

復(fù)制代碼代碼如下:

 
<!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>無標(biāo)題文檔</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> 

效果圖

您可能感興趣的文章:

相關(guān)文章

jquery表格datatables實(shí)例解析直接加載和延遲加載
這篇文章主要針對jquery表格datatables實(shí)例進(jìn)行解析，可以直接加載和延遲加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
編寫自己的jQuery提示框（Tip）插件
這篇文章主要介紹了編寫自己的jQuery提示框（Tip）插件的方法,需要的朋友可以參考下
2015-02-02
使用jQuery實(shí)現(xiàn)WordPress中的Ctrl+Enter和@評論回復(fù)
相信大家對QQ中的Ctrl+Enter快捷回復(fù)和微博上的@指名回復(fù)功能都不陌生,在WordPress的評論欄方面我們同樣可以添加這樣的功能,一起來看使用jQuery實(shí)現(xiàn)WordPress中的Ctrl+Enter和@評論回復(fù)的方法:
2016-05-05
理解jQuery stop()方法
本文目的：為了了解stop()的用法，舉個例子，直觀的方式看看。非常的簡單實(shí)用，有需要的小伙伴參考下
2014-11-11
jQuery中ajax獲取數(shù)據(jù)賦值給頁面的實(shí)例
下面小編就為大家分享一篇jQuery中ajax獲取數(shù)據(jù)賦值給頁面的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對比圖片的方法
這篇文章主要介紹了jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對比圖片的方法,可實(shí)現(xiàn)圖片拖拽變換的功能,需要的朋友可以參考下
2015-08-08
JQuery中attr屬性和jQuery.data()學(xué)習(xí)筆記【必看】
下面小編就為大家?guī)硪黄狫Query中attr屬性和jQuery.data()學(xué)習(xí)筆記【必看】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
2016-05-05
jQuery刪除節(jié)點(diǎn)用法示例(remove方法)
這篇文章主要介紹了jQuery刪除節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了remove方法進(jìn)行頁面元素刪除的相關(guān)使用技巧,需要的朋友可以參考下
2016-09-09
jQuery插件multiScroll實(shí)現(xiàn)全屏鼠標(biāo)滾動切換頁面特效
本文給大家分享的是一款jQuery整屏（全屏）滾動插件網(wǎng)頁特效，滾動鼠標(biāo)滾輪整屏一屏滾動切換代碼，可設(shè)置文字/圖片絕對上下左右居中顯示JS代碼，時下最流行的jQuery全屏滾動插件?。嫒轀y試：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流瀏覽器）
2015-04-04
jQuery判斷元素是否顯示是否隱藏的簡單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query判斷元素是否顯示是否隱藏的簡單實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05