jQuery實(shí)現(xiàn)的卷簾門滑入滑出效果【案例】
本文實(shí)例講述了jQuery實(shí)現(xiàn)的卷簾門滑入滑出效果。分享給大家供大家參考,具體如下:
效果:
如果用JQ來(lái)做,其實(shí)非常簡(jiǎn)單,核心代碼:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> //jq入口函數(shù)簡(jiǎn)寫方法 /* $(function ( ) { })*/ //jq入口函數(shù)普通方式 $(document).ready(function ( ) { $('#flip').on('click',function ( ) { $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不寫默認(rèn)normal }) }) </script>
完整的代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn jQuery滑入滑出</title> <style> #flip,#content { padding: 5px; text-align: center; background-color: #e5eecc; border: 1px solid #c3c3c3; } #content { padding: 100px; display: none; } #flip { cursor: pointer; } </style> </head> <body> <div id="flip">點(diǎn)我,顯示或隱藏面版</div> <div id="content">hello world!</div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> //jq入口函數(shù)簡(jiǎn)寫方法 /* $(function ( ) { })*/ //jq入口函數(shù)普通方式 $(document).ready(function ( ) { $('#flip').on('click',function ( ) { $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不寫默認(rèn)normal }) }) </script> </body> </html>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果【附demo源碼】
- jQuery實(shí)現(xiàn)頁(yè)面點(diǎn)擊后退彈出提示框的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出提示信息的地圖熱點(diǎn)效果
- jquery刪除數(shù)據(jù)記錄時(shí)的彈出提示效果
- jQuery實(shí)現(xiàn)下拉菜單動(dòng)態(tài)添加數(shù)據(jù)點(diǎn)擊滑出收起其他功能
- jQuery實(shí)現(xiàn)的淡入淡出與滑入滑出效果示例
- jquery編寫彈出信息提示條并延時(shí)滑出動(dòng)畫實(shí)現(xiàn)示例
相關(guān)文章
如何解決Jquery庫(kù)及其他庫(kù)之間的$命名沖突
這篇文章介紹了Jquery庫(kù)及其他庫(kù)之間的$命名沖突的解決方法,有需要的朋友可以參考一下2013-09-09簡(jiǎn)單常用的幻燈片播放實(shí)現(xiàn)代碼
幻燈片自動(dòng)播放圖片是當(dāng)前網(wǎng)站比較流行的一個(gè)展示方式,這里項(xiàng)目需要,我自己做了一個(gè)簡(jiǎn)單的,就不詳細(xì)講解了,代碼很簡(jiǎn)單。直接看效果圖和代碼吧,希望對(duì)大家有所幫助2013-09-09用jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼
這篇文章介紹了jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼,有需要的朋友可以參考一下2013-11-11jQuery插件zTree實(shí)現(xiàn)獲取當(dāng)前選中節(jié)點(diǎn)在同級(jí)節(jié)點(diǎn)中序號(hào)的方法
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)獲取當(dāng)前選中節(jié)點(diǎn)在同級(jí)節(jié)點(diǎn)中序號(hào)的方法,結(jié)合實(shí)例形式分析了屬性插件zTree針對(duì)節(jié)點(diǎn)序號(hào)的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03JQueryEasyUI datagrid框架的進(jìn)階使用
本篇文章小編為大家介紹JQueryEasyUI datagrid框架的基本使用,有需要的朋友可以參考一下2013-04-04jquery ajax加載數(shù)據(jù)前臺(tái)渲染方式 不用for遍歷的方法
今天小編就為大家分享一篇jquery ajax加載數(shù)據(jù)前臺(tái)渲染方式 不用for遍歷的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08一張表格告訴你windows.onload()與$(document).ready()的區(qū)別
這篇文章主要介紹了windows.onload()與$(document).ready()的區(qū)別2014-05-058個(gè)超棒的學(xué)習(xí) jQuery 的網(wǎng)站 推薦收藏
根據(jù)國(guó)外科技網(wǎng)站 W3Techs 一項(xiàng)調(diào)查了近100萬(wàn)個(gè)網(wǎng)站數(shù)據(jù)顯示,jQuery是目前最流行的 JavaScript 庫(kù)。2011-04-04