- 浏览: 24218 次
- 性别:
- 来自: 北京
最新评论
-
梧栖凤:
得把未经处理的脚本分享出来啊!
跨浏览器可8方向拖拽剪裁框 -
percy30856:
好东西 正在弄这个玩意儿 参考学习了
Animate Baseclass -
percy30856:
菲哥 你的头像,应该换成未满18岁禁止查看
很棒的时间线控件 -
stoneskin:
:哭笑写javascript的也是猿。。。。我们很多猿都是从写 ...
核心只要两行即可实现添加或移除className -
jamesmos:
enix2212 写道tiannet 写道enix2212 写 ...
核心只要两行即可实现添加或移除className
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ padding: 0; margin:0 ;} #moduleAccordion h3 { line-height: 30px; height: 30px; background-color: #eee; overflow: hidden; border: 1px dashed #CCC; box-shadow:2px 2px 2px 2px #ccc; cursor: pointer; } </style> <script type="text/javascript"> function moduleAccordion(O){ var thee=this,doc=document,indicator=arguments.callee; thee.wrapper=O.wrapper; thee.handler=O.handler || 'h3'; thee.container=O.container || 'div'; var wrapper=doc.getElementById(thee.wrapper),handler=wrapper.getElementsByTagName(thee.handler),container=wrapper.getElementsByTagName(thee.container) , _handler=getChildLength(handler,wrapper), _container=getChildLength(container,wrapper); if(!cheackCondition()) return; function cheackCondition(){ if(!wrapper) return false; if(!(_handler.length== _container.length))return false; return true; } function getChildLength(c,p){ var i=0,len=c.length,t=0,o=[]; for(;i<len;){ c[i].parentNode==p && (++t,o.push(c[i])) ; i++; } return { length : t,obt : o }; } indicator.prototype.constructor = indicator.name; (typeof thee.each !='function') && (indicator.prototype.each = function (o, fn) { var i = 0, key, len = o.length, rt = this || window; if (len === undefined) { for (key in o) { if (fn.call(rt, key, o[key]) === false) { break; } } } else { for (; i < len && fn.call(rt, i, o[i]) !== false; ++i) {} } return o; }); indicator.prototype.Linear = function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }; indicator.prototype.fx=function(o){ var b=0,c=thee.getHeight(o),d=80,t=0,k=0; ~function(){ o.style.height=Math.ceil(thee.Linear(t,b,c,d))+'px'; if(parseInt(o.style.height)<c){ t++; setTimeout(arguments.callee, 5);}; if(k<100){ k++; thee.fade.call(o,Math.ceil(thee.Linear(k,b,100,d)));}; }(); }; indicator.prototype.fade=function (i){ this.style.filter ="alpha(opacity=" + i + ")"; this.style.opacity= i/100; } ; indicator.prototype.getHeight = function(o){ var t=0; o.style.visiblity='hidden'; t=o.scrollHeight; o.style.visiblity='hidden'; return t; }; indicator.prototype.release= function (){ thee.each(_container.obt,function(a,b){ b.style.cssText='height:0;overflow:hidden;'; }); }; indicator.prototype.init = function (){ thee.release(); thee.each(_handler.obt,function(a,b){ thee.play(b); }); }; indicator.prototype.play=function (o){ thee.addEvent(o,'click',function(e){ var e=window.event || e; var t=e.srcElement || e.target,index=thee.index(t,_handler.obt),sibling=_container.obt[index]; if(sibling.offsetHeight==0){ thee.release(); thee.fx(sibling); }else{ return false; } },false); }; indicator.prototype.index = function (a,b){ var t=-1; thee.each(b,function(x,y){ a===y && (t=x); }); return t; }; indicator.prototype.addEvent = function (elem, evType, fn, capture){ if (elem.addEventListener) { elem.addEventListener(evType, fn, capture); }else if (elem.attachEvent) { elem['e' + evType + fn] = fn; elem[evType + fn] = function () { elem['e' + evType + fn](window.event) }; elem.attachEvent('on' + evType, function () { fn.call(elem); }); } else { elem['on' + evType] = fn; } }; return {init: function(){thee.init()}} } </script> </head> <body> <div id="moduleAccordion"> <h3>1</h3> <div> <img src="http://i0.itc.cn/20110324/841_73d5cd8b_51ce_41bd_b40e_6ca0a91550b0_0.jpg" /> </div> <h3>2</h3> <div> <img src="http://i3.itc.cn/20110320/841_a342b3e5_5220_4d4f_be17_0b82785c753b_0.jpg" /> </div> <h3>3</h3> <div> <img src="http://i0.itc.cn/20110324/841_73d5cd8b_51ce_41bd_b40e_6ca0a91550b0_0.jpg" /> <div id="123"></div> </div> <h3>4</h3> <div> <img src="http://i3.itc.cn/20110320/841_a342b3e5_5220_4d4f_be17_0b82785c753b_0.jpg" /> </div> </div> <script type="text/javascript"> new moduleAccordion({wrapper:'moduleAccordion'}).init() </script> </body> </html>
重复造下轮子
发表评论
-
[javascript]9宫格拖拽拼图游戏 puzzle
2012-04-29 09:51 15731.跨浏览器,主流浏览器都可以运行2.纯javascript开 ... -
避免悲剧 密码生成器
2011-12-22 15:35 749最近被暴库的很多,密码安全成为重大问题!如何避免简单密码呢?还 ... -
jQuery创建实例与原型继承揭秘
2011-12-20 23:57 767在普通情况下 ... -
[Javascript]单例模式(singleton )
2011-12-16 15:23 1318Javascript中大家都很习惯用new运算符创建实例。现在 ... -
javascript1.7新语法
2011-12-13 18:30 8761.yield 关键字 Yield的作用与return 差不多 ... -
javascript undo redo
2011-12-09 10:55 2382在浏览器中用调试工具看调用结果 <!DOCTYPE ... -
duffsDevice 高速版
2011-11-25 17:21 794function duffsDevice(items, f ... -
ECMAScript.js2
2011-11-07 11:18 1334package { public native functio ... -
仅限正整数输入
2011-10-27 15:35 872修正了拖拽文本进输入框问题 2011.11.14 &l ... -
Another JavaScript quiz
2011-08-19 18:34 646测试题来自《Another JavaScript quiz》P ... -
跨浏览器可8方向拖拽剪裁框
2011-08-15 20:01 879<!DOCTYPE html PUBLIC &quo ... -
选项卡
2011-08-12 17:36 894<!DOCTYPE html PUBLIC &quo ... -
scroll base
2011-08-04 14:25 893开发版,水平方向已完成,垂直方向没测,可以跨浏览,滚动多个当前 ... -
拖拽排序列表单例
2011-07-27 11:17 1176<!DOCTYPE html PUBLIC &quo ... -
Animate Baseclass
2011-07-12 15:47 1188以下代码仅供参考,请下载附件代码,应该是文本编辑器过滤掉了某些 ... -
很棒的时间线控件
2011-06-24 18:52 1647原生态javascript,希望大家能喜欢 functio ... -
fade方法
2011-05-27 10:12 776function fadeOut(steps){ ... -
核心只要两行即可实现添加或移除className
2011-04-29 11:10 1750<div id="abc" cl ... -
让函数有记忆能力
2011-04-28 15:34 688function addEvent(elem,evType ... -
javascript new 关键字的运行原理
2011-04-06 17:33 1540function javascriptNew(t){ a= ...
相关推荐
这是一款CSS3垂直手风琴Accordion特效。该CSS3 Accordion是对bootstrap Accordion的效果美化。通过简单的CSS3代码来实现炫酷的垂直手风琴效果。
用WPF的Expander控件实现的,重写ControlTemplate,并且实现了缓缓展开和收缩的效果。
Jquery实现的手风琴特效 Accordion 五张图片的Accordion!
jquery ui accordion手风琴插件带动画的竖直手风琴
Bootstrap Accordion手风琴选项卡代码是 一款对原生的Bootstrap Accordion进行美化,制作非常美观的垂直手风琴选项卡代码效果。
Bootstrap Accordion手风琴特效是一款对原生的Bootstrap Accordion进行美化,制作非常美观的垂直手风琴效果。
accordion.js垂直手风琴点击标题切换图片
jquery 手风琴插件 accordion折叠菜单完整版,有很多个菜单的示例。对学习相当有帮助。
jquery手风琴accordion插件网页特效
一款对原生的Bootstrap Accordion进行美化,制作非常美观的垂直手风琴选项卡代码效果。
【Jquery经典特效21】jQuery手风琴效果插件j-accordion
基于jQuery的j-accordion手风琴效果插件,简洁干净,兼容主流浏览器
vue-accordion-menu
多层滑动弹出Accordion手风琴导航菜单效果(jQuery)
accordion-swipe-layout:Android手风琴滑动布局
也分享过几款手风琴下拉菜单,可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉菜单,恰好是两者的结合,效果非常不错。 下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉...
React手风琴 一个由React构建的简单手风琴组件。 可用道具: panels = arrayOf{ title = 'Title', message = 'Message', panelClassName = 'ClassName' } toggleSpeed = {400}, toggleHeight = {40}, ...