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


Posted in Javascript onMarch 04, 2013

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

下图是效果展示,能够借由jQuery的函数展开收缩
jQuery+CSS 半开折叠效果原理及代码(自写) 

//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做动画,所以就不用把选择器写得过于复杂了。
Javascript 相关文章推荐
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
javascript中闭包closure的深入讲解
Mar 03 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 #Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 #Javascript
JS获取后台Cookies值的小例子
Mar 04 #Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 #Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 #Javascript
js给dropdownlist添加选项的小例子
Mar 04 #Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 #Javascript
You might like
php过滤危险html代码
2008/08/18 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
Python易忽视知识点小结
2015/05/25 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
售后专员岗位职责
2013/12/08 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
教师个人学习总结
2015/02/11 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
SSM VUE Axios详解
2021/10/05 Vue.js