jquery制作滑動面闆

項目開發中，我們有時候需要點選某個按鈕出現一個面闆，在面闆上有我們需要的一些操作，或者是圖檔。ok！如下簡單制作滑動面闆效果:

<a href="http://s3.51cto.com/wyfs02/M02/41/20/wKioL1PQ3avhPBiNAAC5niNARIk236.jpg" target="_blank"></a>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</code>

<code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=gb2312"</code> <code>/&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;無标題文檔&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"jQuery/jquery-1.6.2.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code> </code><code>$(document).ready(function(){</code>

<code> </code><code>$(".box a").click(function(){</code>

<code>     </code><code>/*slideToggle()這個方法，如果被選元素是可見的，則隐藏這些元素，如果被選元素是隐藏的，則顯示這些元素。*/</code>

<code>       </code><code>$(".one").slideToggle();</code>

<code>       </code><code>/*</code>

<code>       </code><code>oggleClass() 對設定或移除被選元素的一個或多個類進行切換。</code>

<code>       </code><code>該方法檢查每個元素中指定的類。如果不存在則添加類，如果已設定則删除之。這就是所謂的切換效果。</code>

<code>       </code><code>*/</code>

<code>       </code><code>$(this).toggleClass("active");</code>

<code> </code><code>});</code>

<code> </code> 

<code>       </code><code>$(".box p").hover(function(){</code>

<code>        </code><code>$(this).toggleClass("hover")</code>

<code>       </code><code>});</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code>

<code>*{padding:0;margin:0;}</code>

<code>body{font-size:12px;}</code>

<code>a{text-decoration:none;color:#000066;font-family:"宋體";}</code>

<code>.box{width:500px;margin:0 auto;}</code>

<code>.one{height:200px;background:url(images/2.png) no-repeat ;display:none;}</code>

<code>.box p{border-top:5px solid #333333;background:url(images/1.png) no-repeat top;}</code>

<code>/*将行内元素A寫的和圖檔長度和高度差不多*/</code>

<code>.box p a{display:block;width:140px;height:40;line-height:40px;background:url(images/3.png) no-repeat right 10px;  text-align:center;margin:0 auto;font-size:14px;font-weight:bolder;padding-right:10px;}</code>

<code>/*注冊一個新的class，當我們點選這個a時，将這個注冊号的class添加到a中*/</code>

<code>.box p a.active{background:url(images/4.png) no-repeat right 12px;}</code>

<code>.box p.hover{background:url(images/5.png) no-repeat top}</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"box"</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"one"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>p</code><code>&gt; &lt;</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>&gt;點 擊&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>p</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

ok，這個功能在項目中還是很實用的，尤其是操作按鈕過多一緻排開的話會導緻頁面美觀度不足，采用這個方法，效果十分明顯！

本文轉自 小夜的傳說 51CTO部落格，原文連結：http://blog.51cto.com/1936625305/1529810，如需轉載請自行聯系原作者