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 相关文章推荐
理清apply(),call()的区别和关系
Aug 14 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
Element Input输入框的使用方法
Jul 26 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
windows xp下安装pear
2006/12/02 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php curl基本操作详解
2013/07/23 PHP
PHP闭包函数详解
2016/02/13 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
js时间控件只显示年月
2017/01/08 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
python 判断是否为正小数和正整数的实例
2017/07/23 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
pandas删除指定行详解
2019/04/04 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
js实现弹框效果
2021/03/24 Javascript
应届生自我鉴定
2013/12/11 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
淘宝活动策划方案
2014/02/06 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
商业融资计划书
2014/04/29 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android