jQuery控制的不同方向的滑动(向左、向右滑动等)

引入jquery.js，复制以下代码，即可运行。

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

< div id = "slidebottom" class = "slide" >

< button >

slide it

</ button >

< div class = "inner" >

Slide from bottom

</ div >

</ div >

Js代码

$( '#slidebottom button' ).click( function () {

$( this ).next().slideToggle();

});

2、左侧横向交替滑动 Animate Left

Html代码

< div id = "slidewidth" class = "slide" >

< button >

slide it

</ button >

< div class = "inner" >

Slide from bottom

</ div >

</ div >

Js代码

$( "#slidewidth button" ).click( function (){

$( this ).next().animate({width: 'toggle' });

});

3、左侧横向交替滑动 Animate Left Margin （非隐藏）

Html代码

< div id = "slideleft" class = "slide" style = "width: 50%;float: right" >

< button >

slide it

</ button >

< div class = "inner" >

Slide from bottom

</ div >

</ div >

Js代码

$( "#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代码

< div id = "slidemarginleft" class = "slide" style = "width: 60%;float: left" >

< button >

slide it

</ button >

< div class = "inner" >

Slide from bottom

</ div >

</ div >

Js代码

$( "#slidemarginleft button" ).click( function (){

var $marginlefty = $( this ).next();

$marginlefty.animate({

marginLeft:parseInt($marginlefty.css( 'marginLeft' ),10)==0 ? $marginlefty.outerWidth() : 0

});

});

转载于:https://www.cnblogs.com/wssdx/p/8330260.html