jQuery實現(xiàn)的卷簾門滑入滑出效果【案例】
本文實例講述了jQuery實現(xiàn)的卷簾門滑入滑出效果。分享給大家供大家參考,具體如下:
效果:
如果用JQ來做,其實非常簡單,核心代碼:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> //jq入口函數(shù)簡寫方法 /* $(function ( ) { })*/ //jq入口函數(shù)普通方式 $(document).ready(function ( ) { $('#flip').on('click',function ( ) { $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不寫默認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">點我,顯示或隱藏面版</div> <div id="content">hello world!</div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> //jq入口函數(shù)簡寫方法 /* $(function ( ) { })*/ //jq入口函數(shù)普通方式 $(document).ready(function ( ) { $('#flip').on('click',function ( ) { $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不寫默認normal }) }) </script> </body> </html>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
用jquery中插件dialog實現(xiàn)彈框效果實例代碼
這篇文章介紹了jquery中插件dialog實現(xiàn)彈框效果實例代碼,有需要的朋友可以參考一下2013-11-11jQuery插件zTree實現(xiàn)獲取當前選中節(jié)點在同級節(jié)點中序號的方法
這篇文章主要介紹了jQuery插件zTree實現(xiàn)獲取當前選中節(jié)點在同級節(jié)點中序號的方法,結(jié)合實例形式分析了屬性插件zTree針對節(jié)點序號的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03jquery ajax加載數(shù)據(jù)前臺渲染方式 不用for遍歷的方法
今天小編就為大家分享一篇jquery ajax加載數(shù)據(jù)前臺渲染方式 不用for遍歷的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08一張表格告訴你windows.onload()與$(document).ready()的區(qū)別
這篇文章主要介紹了windows.onload()與$(document).ready()的區(qū)別2014-05-05