jQuery控制的不同方向的滑动(向左、向右滑动等)
引入jquery.js，复制以下代码，即可运行。
<styletype="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代码
<divid="slidebottom"class="slide"> <button> slideit </button> <divclass="inner"> Slidefrombottom </div> </div>
Js代码
$('#slidebottombutton').click(function(){
$(this).next().slideToggle();
});
2、左侧横向交替滑动AnimateLeft
Html代码
<divid="slidewidth"class="slide"> <button> slideit </button> <divclass="inner"> Slidefrombottom </div> </div>
Js代码
$("#slidewidthbutton").click(function(){
$(this).next().animate({width:'toggle'});
});
3、左侧横向交替滑动AnimateLeftMargin（非隐藏）
Html代码
<divid="slideleft"class="slide"style="width:50%;float:right"> <button> slideit </button> <divclass="inner"> Slidefrombottom </div> </div>
Js代码
$("#slideleftbutton").click(function(){
var$lefty=$(this).next();
$lefty.animate({
left:parseInt($lefty.css('left'),10)==0?-$lefty.outerWidth():0
});
});
4、右侧横向滑动Slidetoright
Html代码
<divid="slidemarginleft"class="slide"style="width:60%;float:left"> <button> slideit </button> <divclass="inner"> Slidefrombottom </div> </div>
Js代码
$("#slidemarginleftbutton").click(function(){
var$marginlefty=$(this).next();
$marginlefty.animate({
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0?$marginlefty.outerWidth():0
});
});热门推荐
10 朋友新年祝福语大全 简短
11 新年祝福语简短大方兔年
12 搬新家礼物祝福语简短
13 同学见面花束祝福语简短
14 五一假期祝福语幽默简短
15 离职欢送敬酒祝福语简短
16 对学弟的祝福语简短
17 考老师辞职祝福语简短
18 祝福语驱散霉运的话简短