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>