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 相关文章推荐
js删除所有的cookie的代码
Nov 25 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
Vue数据绑定实例写法
Aug 06 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
js 计数排序的实现示例(升级版)
Jan 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
PHP实时显示输出
2008/10/02 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php 购物车完整实现代码
2014/06/05 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
财务会计自荐信范文
2014/02/21 职场文书
百年校庆节目主持词
2014/03/27 职场文书
共青团员自我评价范文
2014/09/14 职场文书
丽江古城导游词
2015/02/03 职场文书
安全生产先进个人总结
2015/02/15 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
python高温预警数据获取实例
2022/07/23 Python