jQuery+CSS 半开折叠效果原理及代码(自写)

一个项目想用jQuery做一个可以半折叠的DIV元素，苦于jQueryUI中accordion没有提供相关的方法，就自己写了个。以前使用jQueryUI的时候发现能够用的accordion全部折叠起来了，没办法设置折叠的最小高度。
代码质量很低，希望老鸟能够指点指点。

下图是效果展示，能够借由jQuery的函数展开收缩
 


代码如下:

//author: hlhr
//require: Jquery1.4 and above
function animate_toggle_height(maxh,minh,maxo,mino,element,speed) {//这个是纵向的，参数解释：最大高度，最小高度，最大透明度，最小透明度，元素，动画速度
if (element.css("height")==minh.toString().concat("px")){//如果是最小高度就展开
element.animate({
height:maxh,
opacity:maxo
},{queue: false},speed);
return "Fold"
}
if (element.css("height")==maxh.toString().concat("px")){//如果是最大高度就折叠
$(this).html("");
element.animate({
height:minh,
opacity:mino
},{queue: false},speed);
return "Read more";
}
}
function animate_toggle_width(maxw,minw,maxo,mino,element,speed) {
if (element.css("width")==minw.toString().concat("px")){
element.animate({
width:maxw,
opacity:maxo
},{queue: false},speed);
return "Fold"
}
if (element.css("width")==maxw.toString().concat("px")){
element.animate({
width:minw,
opacity:mino
},{queue: false},speed);
return "Read more";
}
}

代码如下:

<html>
<head>
<script src="jquery-1.9.1.min.js"></script><!--需要jquery库-->
<script src="jqslider.js"></script><!--链接上文的js库-->
<style>
body{margin: 0 auto; text-align:center;}
.slide{font-size:20px; overflow: hidden; width: 500px; }
#content{margin:0 auto; width: 500px;}
.viewbutton{position:relative; text-align: right;}
</style>
</head>
<body>
<fieldset id="content">
<div class="slide">
<a class="viewbutton" href="#">
Read more
</a>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
</div>
</fieldset>
<p />
<fieldset id="content">
<div class="slide">
<a class="viewbutton" href="#">
Read more
</a>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
<p>slide!</p>
</div>
</fieldset>

<script type="text/javascript">
var max_h=300;
var min_h=100;
//var max_w=500;
//var min_w=10;
var max_o=1;
var min_o=0.3;
$(".slide").css({opacity:min_o});//设置初始的透明度
$(".slide").css({height:min_h});//设置初始的高度
$(".viewbutton").click(function(){//这里只是调用了纵向展开，也可以调用横向展开
$(this).html(animate_toggle_height(max_h,min_h,max_o,min_o,$(this).parent(),500));//自动识别为viewbutton的上一级进行动画
});
</script>
</body>
</html>

viewbutton的层级可自行修改，但要注意动画的目标是什么。我写的viewbutton会对它上一级的那个div做动画，所以就不用把选择器写得过于复杂了。

赞 (0)

相关推荐

  • js无限级折叠菜单精简版

    无限级折叠菜单 1.01 JS版 无限级折叠菜单 1.0.1 JS版 菜单_1_1 菜单_2_1 菜单_3_1 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_3_2 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_2_2 菜单_3_1 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_2 菜单_3_2 菜单_4_1 菜单_5_1 菜单_5_2 菜单_4_2 菜单_5_1 菜单_5_

  • JavaScript可折叠区域实现代码

    JavaScript可折叠区域实现代码

    技术实现的关键:使用CSS的display特性,display特性的值有:none和block.none即为隐藏:block即为显示. 动手之前的设计:可折叠区域分为两个区域:标题栏和内容区域.标题栏总是可见的,内容部分是可以折叠或展开的.在页面上,可以使用两个<div>元素分别实现这个设计. 实现步骤: 在页面中插入<div>元素,并加入实现折叠功能的JS代码,代码如下: function toggle(sDivId) { var oDiv = document.getEleme

  • javascript仿qq界面的折叠菜单实现代码

    最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧. 以下是html结构: <div id="a"><div id="h1">sdfds</div><div id="b1">dsfdsfsdfsd</div><div id="h2">dsf</div&

  • js 全兼容可高亮二级缓冲折叠菜单

    js 全兼容可高亮二级缓冲折叠菜单

    在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头.页脚.左侧菜单加一个右侧ifame框架页.所以那种带折叠的二级菜单是会经常使用到的,本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单. 特点: 全兼容,浏览器测试:IE5.5.IE6.IE7.IE8.FF3.0.谷歌.Safari 4.0.Opera9.0. Html结构优雅简洁,无多余标签,利于程序循环输出. 样式与结构分离,你可以在样式表中修改不同的风格. 当前选中项高亮状态,一级菜单和二级菜单都

  • css实现会折叠、展开的菜单导航栏效果

    function show(c_Str) {if(document.all(c_Str).style.display=='none') {document.all(c_Str).style.display='block';} else{document.all(c_Str).style.display='none';}} function high(){ if (event.srcElement.className=="k"){ event.srcElement.style.backg

  • jquery实现点击TreeView文本父节点展开/折叠子节点

    jquery实现点击TreeView文本父节点展开/折叠子节点

    以前一个现在不用的帐号发布的随笔,现在人肉搬过来吧. 注册用户有一段时间了,一直很忙,到现在还没有写一篇,忽然觉的一定要花点时间记录和总结一些东西.好吧,就从这里开始了. 今天客户提出要点击菜单(TreeView实现的)的父级节点时,展开节点.心想这个应该是很常见的功能吧,特意google了一下,发现大部分是将的不是js实现的,有些js实现的写的麻烦,干脆自己写一个吧,应该不难的. 首先思路是,,让文本点击的时候执行左边'+'号的事件,查看源码看到,'+'号的事件是: javascript:Tr

  • jQuery+CSS 半开折叠效果原理及代码(自写)

    jQuery+CSS 半开折叠效果原理及代码(自写)

    一个项目想用jQuery做一个可以半折叠的DIV元素,苦于jQueryUI中accordion没有提供相关的方法,就自己写了个.以前使用jQueryUI的时候发现能够用的accordion全部折叠起来了,没办法设置折叠的最小高度. 代码质量很低,希望老鸟能够指点指点. 下图是效果展示,能够借由jQuery的函数展开收缩   复制代码 代码如下: //author: hlhr //require: Jquery1.4 and above function animate_toggle_height

  • jQuery+css实现的时钟效果(兼容各浏览器)

    jQuery+css实现的时钟效果(兼容各浏览器)

    本文实例讲述了jQuery+css实现的时钟效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 这里没有做太多的修饰,简单的实现了一下功能,另外,用的是js的setTimeout方法,当时间长了之后,会有一定的延时,建议,在每隔多少分钟执行一次时钟校准!哈哈,都有误差的嘛,反正我是没给你校. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

  • Vue 实现展开折叠效果的示例代码

    Vue 实现展开折叠效果的示例代码

    本文介绍了Vue 实现展开折叠效果的示例代码,分享给大家,具体如下: 效果如见: 1.html代码 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js文本段落展开和收拢效果</title> <script type="text/javasc

  • jquery实现全选功能效果的实现代码

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" value="全选/全不选"/>全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type=&qu

  • Pycharm编辑器功能之代码折叠效果的实现代码

    1.主题 在一些情况下,如果某些代码显得不太重要,我们可以通过Pycharm的代码折叠功能将其折叠为一行.在接下来的部分我们将介绍代码折叠功能基本用法. 2.代码可折叠轮廓线以及折叠开关 首先,我们观察一下代码左侧的折叠线.这条细线显示在代码左侧,标记了代码块区域.当代码处于未折叠状态时,线的开头和结尾分别显示折叠开关和:当代码块折叠之后,两个开关标志将会合并成一个,折叠后的代码只显示第一行,其他行隐藏在三个点号后面.单击这个加号的标志即可将折叠代码展开. 将鼠标指针悬停在折叠线上,折叠线会加粗

  • jQuery+css实现图片滚动效果(附源码)

    jQuery+css实现图片滚动效果(附源码)

    源码下载 bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间距,默认为0. auto:是否自动滚动,默认为false. auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒. auto_dir:自动滚动的方向,默认为next,你可以试下prev. next_image:向右滚方向按钮图片,可以用CSS设

  • 一文搞懂Android RecyclerView点击展开、折叠效果的实现代码

    一文搞懂Android RecyclerView点击展开、折叠效果的实现代码

    RecyclerView是什么 RecycleView是Android5.0后谷歌推出的一个用于在有限的窗口中展示大量数据集的控件,位于support-v7包中.它可以实现与ListView和GridView一样的效果,提供了一种插拔式的体验,高度的解耦,异常的灵活,只需设置其提供的不同的LayoutManager,ItemAnimator和ItemDecoration,就能实现不同的效果. RecyclerView的优点 1.支持局部刷新.    2.可以自定义item增删时的动画.    3

  • JQuery实现table行折叠效果以JSON做数据源

    复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>

  • jquery实现弹出窗口效果的实例代码

    JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来. 其大致步骤为: •创建一个装载弹出窗口的div 复制代码 代码如下: <html>  <head>    <title>jQuery实例1:浮动窗口</title>    <meta http-equiv="Content-Type" content="te

  • jquery单行文字向上滚动效果的实现代码

    <body> <div id="title" style="width:100%;height:40px;">看看间断滚动文字</div> <div id="content" class="infocontent"> <div id="top" class="infolist"> <ul> <li>央视3

随机推荐