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

一、总结

一句话总结：就是普通的jquery动画中的滑动效果。$('#content').slideToggle()。滑动效果的实质是通过调整高度。

1、滑动面板文字如何随着滑动上下改变如何实现？

如果图片显示的，就让文字变成隐藏，如何图片是隐藏的，就让文字变成显示

二、如何实现滑动面板效果

1、相关知识

滑动面板

案例描述：带有展开隐藏效果的菜单。

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

   <meta charset="UTF-8">

   <title>演示文档</title>

   <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

   <style type="text/css">

      *{padding: 0;margin:0;}

       .nav{width: 500px;margin: 0 auto}

       #content{width: 500px;height: 300px;display: none;}

       .nav span{width:150px;display: block;background: rgb(150,0,0);margin: 0 auto;text-align: center;cursor: pointer;}

   </style>

 </head>

 <body>

 <div class="nav">

   <div id="content"><img src="qsmy.jpg" alt="" width="500" height="300"></div>

   <span>展开><</span>

 </div>

 <script>

   $('.nav span').click(function(){

     var dis=$('#content').css('display')

     if (dis=='none'){

       $(this).html('隐藏<>')

     }else{

       $(this).html('展开><')

     }

     $('#content').slideToggle()

   })

 </script>

 </body>

 </html>
 

js进阶 13-7 如何实现滑动面板效果的更多相关文章

  1. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  2. 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  3. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

  4. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...

  5. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  6. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

  7. 【 D3.js 进阶系列 — 4.0 】 绘制箭头

    转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...

  8. js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）

    js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...

  9. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

随机推荐

  1. 【Linux下tar命令详解】

    tar命令用于建立.还原备份文件,它可以加入.解开备份文件内的文件. 参数 带有*号的为常用的参数 . -A 新增压缩文件到已存在的压缩包 . -c 建立新的压缩文件* . -d 记录文件的差别 . ...

  2. 【Henu ACM Round #12 E】Thief in a Shop

    [链接] 我是链接,点我呀:) [题意] n个物品,每个物品都有无限个. 第i个物品的价格是一样都,都是ai 让你从中选出恰好k个物品 问你选出的物品的总价值 有多少种不同的可能. [题解] 可以用f ...

  3. LeetCode 223 Rectangle Area（矩形面积）

    翻译 找到在二维平面中两个相交矩形的总面积. 每一个矩形都定义了其左下角和右上角的坐标. (矩形例如以下图) 如果,总占地面积永远不会超过int的最大值. 原文 分析 这题前天试过,写了一堆推断.终究 ...

  4. Onvif开发之服务端发现篇

    服务端的开发相对来说比客户端稍微难一点,也就是给填充相关结构体的时候,需要一点一点的去查阅,验证各个结构中各个成员各自代表什么意思,以及对应的功能需要是那个接口实现,这是开发服务端最头疼的事情.(在开 ...

  5. go channel实现

    go channel实现 Go语言经过多年的发展,于最近推出了第一个稳定版本.相对于C/C++来说,Go有很多独特之出,比如提供了相当抽象的工具,如channel和goroutine.本文主要介绍ch ...

  6. Kinect 开发 —— 保持视频影像

    相比直接将影像显示出来,如果能将录制到的影像保存到硬盘上就好了.但是,影像录制,是需要一定的技巧,在网上可以看到很多例子演示如何将Kinect获取到的影像以图片的形式保存到本地,前面的博文也介绍了这一 ...

  7. 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) D】Bash and a Tough Math Puzzle

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 对于1操作 令len = r-l+1 等价于查找l..r这个范围内x的倍数的个数是否大于等于len-1 也即l..r这个范围内不是x ...

  8. 【Android Studio探索之路系列】之六：Android Studio加入依赖

    作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells github:https://github.co ...

  9. PHP JSON的BUG

    将下面的数组进行 JSON 编码时出错,编码中丢掉了最后一维数组中的下标. Array ( [1] => Array ( [0] => Array ( [0] => Array ( ...

  10. 体验SUSE （附视频演示）

    操作动画演示 本文出自 "李晨光原创技术博客" 博客,谢绝转载!