html左右滑动选择控件,jQuery让控件左右移动的三种实现方法

方法一

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

$(document).ready(function(){

$("#right1").click(function(){

$(".block1").animate({left: '+=50px'}, "slow");

});

$("#left1").click(function(){

$(".block1").animate({left: '-=50px'}, "slow");

});

});

方法二

$(document).ready(function(){

$("#right2").click(function(){

$(".block2").css("margin-left","+=50px");

});

$("#left2").click(function(){

$(".block2").css("margin-left","-=50px");

});

});

方法三

$(document).ready(function(){

$("#right3").click(function(){

$(".block3").animate({width:"+=50px"}, 222);

});

$("#left3").click(function(){

$(".block3").animate({width:"-=50px"}, 222);

});

});

全部代码

无标题文档

$(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);

});

});

«

»

«

»

«

»

效果图