这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
一个项目想用 jQuery 做一个可以半折叠的 DIV 元素,苦于 jQueryUI 中 accordion 没有提供相关的方法,就自己写了个。以前使用 jQueryUI 的时候发现能够用的 accordion 全部折叠起来了,没办法设置折叠的最小高度。 代码质量很低,希望老鸟能够指点指点。 下图是效果展示,能够借由 jQuery 的函数展开收缩
jQuery 做一个可以半折叠的 DIV 元素由于 jQueryUI 中 accordion 没有提供相关的方法因此自己写了个,代码质量很低希望大家多多指点
- //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 做动画,所以就不用把选择器写得过于复杂了。
来源: http://www.phperz.com/article/17/0415/280848.html