微信扫一扫打赏支持

js进阶 13-7 如何实现滑动面板效果

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>
复制代码

 

 

 

 

 

 
posted @   范仁义  阅读(1211)  评论(2)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
侧边栏
打赏
点击右上角即可分享
微信分享提示
SQL AI 助手