js進階 13-7 如何實現滑動面板效果

一、總結

一句話總結：就是普通的jquery動畫中的滑動效果。$('#content').slideToggle()。滑動效果的實質是通過調整高度。

1、滑動面板文字如何隨着滑動上下改變如何實現？

如果圖片顯示的，就讓文字變成隱藏，如何圖片是隱藏的，就讓文字變成顯示

二、如何實現滑動面板效果

1、相關知識

滑動面板

案例描述：帶有展開隱藏效果的菜單。

2、代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6   <meta charset="UTF-8">
 7   <title>演示文檔</title>
 8   <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9   <style type="text/css">
10      *{padding: 0;margin:0;}
11       .nav{width: 500px;margin: 0 auto}
12       #content{width: 500px;height: 300px;display: none;}
13       .nav span{width:150px;display: block;background: rgb(150,0,0);margin: 0 auto;text-align: center;cursor: pointer;}
14   </style>
15 </head>
16 <body>
17 <div class="nav">
18   <div id="content"><img src="qsmy.jpg" alt="" width="500" height="300"></div>
19   <span>展開><</span>
20 </div>
21 <script>
22   $('.nav span').click(function(){
23     var dis=$('#content').css('display')
24     if (dis=='none'){
25       $(this).html('隱藏<>')
26     }else{
27       $(this).html('展開><')
28     }
29     $('#content').slideToggle()
30     
31   })
32 </script>
33 </body>
34 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js實現滑動器效果 JS實現滑動門效果 js實現圖片滑動顯示效果 axure rp教程（四）動態面板滑動效果 vue原生js實現下拉刷新(阻尼滑動效果) Axure RP使用攻略--動態面板滑動效果（10） js移動端滑動效果 Android實現左右滑動效果 winform實現圖片的滑動效果 jQuery實現div滑動效果