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. 【VC++学习笔记三】控件自绘

    MFC应用程序中,大部分的控件类型都已经被定制好了,即便是修改,也只是小范围内的修改,而很多情况下,我们又需要对界面进行特殊定制,这时,最好的办法就是用CWnd类进行派生,自己生成新的窗体,在WM_P ...

  2. Windows 操作系统与 .NET Framework

    Windos 2000 在单位的机房里好不easy才找到一台安装 Windows 2000 Server SP4 操作系统的server.这台硕果仅存的server到本月底也要退役了. Windows ...

  3. msp430在ccsv5下出现的问题总结

    一.内存问题 问题描写叙述,报错: program will not fit into available memory.  placement with alignment fails for se ...

  4. dreamweaver 8的替换功能

    dreamweaver 8的替换功能 下面教你用dreamweaver 8的替换功能来删除这些冗余代码. 查找范围:文件夹(然后选取你需要替换的文件夹) 搜索:源代码查找:\btppabs=" ...

  5. Lucene 定义

    福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑         Java全栈大联盟   ...

  6. assert增强宏的实现

    作者:朱金灿 来源:http://blog.csdn.net/clever101 标准c的assert宏和MFC的ASSERT宏都不支持输出太多的信息.今天实现了一个assert增强宏,可以输出更多的 ...

  7. Kinect 开发 —— 控制PPT播放

    实现Kinect控制幻灯片播放很简单,主要思路是:使用Kinect捕捉人体动作,然后根据识别出来的动作向系统发出点击向前,向后按键的事件,从而使得幻灯片能够切换. 这里的核心功能在于手势的识别,我们在 ...

  8. Oracle primary key&foreign key

    --主键 alter table tablename1 add constraint pk_tablename1 primary key(column1);--增加数据表1的主键column1,如果是 ...

  9. spark读写mysql

    spark读写mysql除官网例子外还要指定驱动名称 travels.write .mode(SaveMode.Overwrite) .format("jdbc") .option ...

  10. 3.SOAP和WSDL的一些必要知识

    转自:https://www.cnblogs.com/JeffreySun/archive/2009/12/14/1623766.html SOAP和WSDL对Web Service.WCF进行深入了 ...