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 相关文章推荐
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
纯js实现手风琴效果
2020/04/17 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
Python中IPYTHON入门实例
2015/05/11 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
2014高中生入党思想汇报范文
2014/09/13 职场文书
拆迁委托协议书
2014/09/15 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
工程催款通知书
2015/04/17 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2015年科普工作总结
2015/07/23 职场文书
学生会干部任命书
2015/09/21 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
如何在Python项目中引入日志
2021/05/31 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL