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自带函数备忘 数组
Dec 29 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python自带的IDE在哪里
2020/07/01 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
秋季运动会表扬稿
2014/01/16 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
中文教师求职信
2014/02/22 职场文书
党员剖析材料范文
2014/09/30 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
运动会通讯稿300字
2015/07/20 职场文书
什么是css原子化,有什么用?
2022/04/24 HTML / CSS