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. CentOS yum安装mcrypt详细图解教程

    CentOS yum安装mcrypt详细图解教程 在Linux的发行版CentOS 6.3 系统下,LAMP(Linux+Apache+Mysql+php)环境搭建好后发现PHPMyadmin提示 “ ...

  2. Spring Cloud学习笔记【三】服务消费者Feign

    Feign 是一个声明式的 Web Service 客户端,它的目的就是让 Web Service 调用更加简单.它整合了 Ribbon 和 Hystrix,从而让我们不再需要显式地使用这两个组件.F ...

  3. 洛谷 P2117 小Z的矩阵

    P2117 小Z的矩阵 题目描述 小Z最近迷上了矩阵,他定义了一个对于一种特殊矩阵的特征函数G.对于N*N的矩阵A,A的所有元素均为0或1,则G(A)等于所有A[i][j]*A[j][i]的和对2取余 ...

  4. xadmin列表页添加自定义工具栏toolbar

    通过xadmin的Plugin实现,adminx.py中 class Link2AdminPlugin(BaseAdminPlugin): link_2_admin = False def init_ ...

  5. HDOJ 4460 Friend Chains 图的最长路

    类似于树的直径,从随意一个点出发,找到距离该点最远的且度数最少的点. 然后再做一次最短路 Friend Chains Time Limit: 2000/1000 MS (Java/Others)    ...

  6. 基于TI Davinci架构的多核/双核开发高速扫盲（以OMAP L138为例），dm8168多核开发參考以及达芬奇系列资料user guide整理

    基于TI Davinci架构的双核嵌入式应用处理器OMAPL138开发入门 原文转自http://blog.csdn.net/wangpengqi/article/details/8115614 感谢 ...

  7. 第二天,导出文件sql，查询，视图view,聚合函数，反模式，字符串处理函数

    //把数据库导出到脚本文件mysqldump -uroot -p1234 --databases abc > d:/a/abc.sql CREATE TABLE stud( id INT PRI ...

  8. XML与JSON的区别?各自有哪些优缺点?

    JSON和XML都是数据传输格式,它们有哪些区别,又都有些什么优缺点呢?零度带领大家来分析分析. 一.先来看看两者的定义 1.XML的定义 扩展标记语言 (Extensible Markup Lang ...

  9. （转）OpenCV 基本知识框架

    以下是对<学习OpenCV>一书知识框架的简单梳理 转自:http://blog.chinaunix.net/uid-8402201-id-2899695.html 一.基础操作      ...

  10. class的写法

    java中class的写法:1.public class xxx{}2.非public类:public class A{}public class B{}必须保证一个其中一个类名是public并与ja ...