這篇文章主要介紹了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

});

});

更多信息請查看IT技術專欄