jQuery控制的不同方向的滑动(向左、向右滑动等)
导读：引入jquery.js，复制以下代码，即可运行。12345678910111213141516<style type="text/css">.slide {position:relative;height:200;lightye...
引入jquery.js，复制以下代码，即可运行。
| 12345678910111213141516 | style type="text/css">
.slide {
position:relative;
height:200;
lightyellow;
}
.slide .inner {
position:absolute;
left:0;
bottom:0;
height:100;
lightblue;
width:100%}
/style>
|
1、slidetoggle() 交替slidedown(),slideup()
Html代码
| 12345678 | divid="slidebottom"class="slide">
button>
slide it/button>
divclass="inner">
Slide from bottom/div>
/div>
|
Js代码
| 123 | $('#slidebottom button').click(function() {
$(this).next().slideToggle();
}
);
|
2、左侧横向交替滑动 Animate Left
Html代码
| 12345678 | divid="slidewidth"class="slide">
button>
slide it/button>
divclass="inner">
Slide from bottom/div>
/div>
|
Js代码
| 123 | $("#slidewidth button").click(function(){
$(this).next().animate({
width:'toggle'}
);
}
);
|
3、左侧横向交替滑动 Animate Left Margin （非隐藏）
Html代码
| 12345678 | divid="slideleft"class="slide"style="width: 50%;
float: right">
button>
slide it/button>
divclass="inner">
Slide from bottom/div>
/div>
|
Js代码
| 123456 | $("#slideleft button").click(function(){
var$lefty = $(this).next();
$lefty.animate({
left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0}
);
}
);
|
4、右侧横向滑动Slide to right
Html代码
| 12345678 | divid="slidemarginleft"class="slide"style="width: 60%;
float: left">
button>
slide it/button>
divclass="inner">
Slide from bottom/div>
/div>
|
Js代码
| 123456 | $("#slidemarginleft button").click(function(){
var$marginlefty = $(this).next();
$marginlefty.animate({
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0}
);
}
);
|
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： jQuery控制的不同方向的滑动(向左、向右滑动等)
本文地址： https://pptw.com/jishu/18551.html