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);
});
});
?
?
?
?
?
?
效果圖
總結
以上是生活随笔為你收集整理的html左右滑动选择控件,jQuery让控件左右移动的三种实现方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为鸿蒙备胎转正,华为鸿蒙是备胎系统，但
- 下一篇： html同时执行多个ajax,Ajax方