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. Swift实战(2)--在工程中添加object-C的类或者第三方框架(附翻译)

    原文地址:http://stackoverflow.com/questions/24002369/how-to-call-objective-c-code-from-swift Using Objec ...

  2. 【Henu ACM Round#17 A】Simple Game

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 肯定是放在m-1或者m+1的. (m-1是左边的点都离a最近,而m+1则是右边的点都离他最近. 看看哪个更好就行 [代码] #inc ...

  3. 这是一套Java菜鸟到大牛的学习路线之高级教程，由工作了10年的资深Java架构师整理。

    这是一套Java菜鸟到大牛的学习路线之高级教程,由工作了10年的资深Java架构师整理.        01-java高级架构师设计-基础深入        J2SE深入讲解        Java多 ...

  4. Lua刚開始学习的人（一）--Lua 简单教学

    近期因为工作原因.临时木有<Oracle起步学习>续集.领导知道学习下Lua脚本语言.看了一周了.趁热打铁,留下点实用的东西吧. 本系列会主要针对宿主语言为 Delphi,原理都是一样的, ...

  5. LinkedIn微服务框架rest.li

    linkedin/rest.li  https://github.com/linkedin/rest.li LinkedIn微服务框架rest.li摘要:Rest.li是一款REST+JSON框架,使 ...

  6. 前端js中this指向及改变this指向的方法

    js中this指向是一个难点,花了很长时间来整理和学习相关的知识点. 一. this this是JS中的关键字, 它始终指向了一个对象, this是一个指针; 参考博文: JavaScript函数中的 ...

  7. iptables-save && iptables-restore iptables规则保存于还原

    iptables-save命令用于将linux内核中的iptables表导出到标准输出设备商,通常,使用shell中I/O重定向功能将其输出保存到指定文件中. 语法 -t:指定要保存的表的名称. 实例 ...

  8. [Redux-Observable && Unit Testing] Use tests to verify updates to the Redux store (rxjs scheduler)

    In certain situations, you care more about the final state of the redux store than you do about the ...

  9. cocoapod卡在了analyzing dependencies

    尽管公司的项目没有使用cocoapod,可是有一些第三方库本身依赖其它第三方的库,而且是用cocoapod来管理这些依赖的.所以在使用某些第三方库时.还是须要用到cocoapod的.今天在github ...

  10. local-语言切换监听事件

    今天在更改时钟的问题的时候,需要监听语言切换来刷新时钟的显示.记录下监听方法 //注册监听事件 intentFilter.addAction(Intent.ACTION_LOCALE_CHANGED) ...