基于jQuery實現(xiàn)下拉收縮(展開與折疊)特效

更新時間：2012年12月25日 17:05:09 作者：

jQuery下拉收縮特效，點擊下邊那個按鈕，就可實現(xiàn)下拉的效果，也叫展開與折疊的效果，使用了jQuery插件，如何不習慣使用jquery插件的朋友當然使用純Js也能實現(xiàn)哦，但是jquery現(xiàn)在這么流行，值得學(xué)習一下哦

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery下拉收縮特效</title> <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script> <style type="text/css"> body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #69C7F7; height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #F27613; } .btn-slide { background: #F27613 url(//img.jbzj.com/file_images/article/201212/20121225165932118.gif) no-repeat right -50px;; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } </style> </head> <body> <h1>演示不了 請刷新下</h1> <div style="display: block;" id="panel">  </div> <p class="slide"><a href="javascript:;" class="btn-slide active">點擊試試</a></p> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

仿Discuz!的論壇評分發(fā)帖彈出提示并漸漸消失的效果
仿Discuz!論壇評分發(fā)帖彈出提示并漸漸消失的效果，相信不少朋友都見到過這效果吧
2010-10-10
js 左右懸浮對聯(lián)廣告代碼示例
這篇文章主要介紹了js 左右懸浮對聯(lián)廣告代碼示例,需要的朋友可以參考下
2014-12-12
帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng)
這篇文章帶你快速上手前端響應(yīng)式布局與Bootstrap柵格系統(tǒng),響應(yīng)式布局主要是針對各種不同尺寸的屏幕兼容性問題,需要的朋友可以參考下
2023-03-03
javascript實現(xiàn)的在當前窗口中漂浮框的代碼
javascript實現(xiàn)的在當前窗口中漂浮框的代碼，代碼中有注釋，需要學(xué)習的朋友可以參考下。
2010-03-03
js QQ客服懸浮效果實現(xiàn)代碼
一段js實現(xiàn)的QQ客服懸浮特效代碼，經(jīng)常用在網(wǎng)頁上顯示QQ客服在線信息，很實用的一段代碼
2014-12-12
支持IE,firefxo,chrome瀏覽器下鼠標拖動和拖拽的鼠標指針特效
這篇文章主要分享一個鼠標拖動的層的實例，支持谷歌瀏覽器，firefox，ie等瀏覽器，需要的朋友可以測試下
2015-02-02
純CSS實現(xiàn)撲克牌效果
純CSS實現(xiàn)撲克牌效果，太牛了吧？開始我還以為是一張圖片呢，后來發(fā)現(xiàn)代碼里沒有調(diào)用任何圖片，頓時有點詫異，CSS果然很牛，或是作者水平比較牛？
2010-09-09
封裝的原生javascript彈出層代碼
最近抽空余的時間寫了個彈出層的插件，功能不算強大，當練手，以下為示例代碼。
2010-09-09
兼容性非常好的js右下角與漂浮廣告代碼
兼容性非常好的js右下角與漂浮廣告代碼，需要的朋友可以參考下。
2010-11-11
js實現(xiàn)完美拖拽效果可拖動層與回放拖動規(guī)跡并顯示拖動距離參數(shù)
一個完美的JS拖拽功能，實現(xiàn)層在網(wǎng)頁上任意拖動，還可回放拖動規(guī)跡，而且在拖動時顯示拖動距離參數(shù)等相關(guān)屬性。經(jīng)本人測試兼容性也是相當不錯的代碼，學(xué)習JavaScript的朋友，可以拿來研究研究，您可不要錯過哦
2012-12-12