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. img下面的留白解决

    在做网页的时候经常会出现一个令人困惑的现象.那就是行内元素和块级元素之间会出现“留白”.就是块级元素中明明只有一个行内元素,但行内元素却不会铺满块级元素.像这个例子: “留白”出现的原因 行内元素默认 ...

  2. CSUOJ 1555 Inversion Sequence

    1555: Inversion Sequence Time Limit: 2 Sec  Memory Limit: 256 MBSubmit: 107  Solved: 34 Description ...

  3. 洛谷 P1719 最大加权矩形

    P1719 最大加权矩形 题目描述 为了更好的备战NOIP2013,电脑组的几个女孩子LYQ,ZSC,ZHQ认为,我们不光需要机房,我们还需要运动,于是就决定找校长申请一块电脑组的课余运动场地,听说她 ...

  4. AVEVA PDMS Text Tool

    AVEVA PDMS Text Tool eryar@163.com 网上有个文字工具插件,可以在PDMS中创建三维的字母.数字,不过不能创建中文.所以开发一个小工具,可以在PDMS中创建任意文字,如 ...

  5. 正确地在QML应用中使用fontsize

    我们知道我们有时须要显示text文本.可是,在QML应用中.我们应该怎样选择font的大小呢?在今天的这篇文章中,我们将展示在Ubuntu平台中的不同文字的大小.我们能够通过FontUtils来帮我们 ...

  6. ctags 寻找方法定义处

    ctags这个是vim的一个插件,它可以用来生成一个检索文件,里面保存有一些索引信息.例如,一些类跟方法.变量等的定义位置当我们对一个路径执行ctags -R的时候,就会自动生成一个ctags,然后我 ...

  7. Resize图片

    在网站上传图片的时候,提示图片太大了. 有5种方式来调整图片大小 http://www.wikihow.com/Resize-a-JPEG picresize.com 这个网站比较靠谱:使用Windo ...

  8. IBM Tivoli Netview在企业网络管理中的实践（附视频）

    今天我为大家介绍的一款高端网管软件名叫IBM Tivoli NetView,他主要关注是IBM整理解决方案的用户,分为Unix平台和Windwos平台两种,这里视频演示的是基于Windows 2003 ...

  9. 适合ASP.NET Web API使用的场景

    富客户端web应用程序:ASP.NET Web API适合大量使用AJAX调用的富客户端应用程序,如Silverlight应用程序,基于Adobe Flash的应用程序或单页应用程序(SPA)等. 本 ...

  10. groupmod---更改群组识别码或名称

    groupmod命令用于更改群组识别码或名称. 需要更改群组的识别码或名称时,可用groupmod指令来完成这项工作. 语法 groupmod [-g <群组识别码> <-o> ...