`
enix2212
  • 浏览: 25192 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
sp42
社区版块
存档分类
最新评论

可以跳动的手风琴 Accordion

JavaScriptCC++C#XHTML 
阅读更多 

<!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 new 关键字的运行原理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    WPF手风琴菜单Accordion

    在本文中，我们将深入探讨如何使用Windows Presentation Foundation (WPF) 的Expander控件来创建一个具有动画效果的手风琴式菜单，也被称为Accordion菜单。这种菜单常用于应用程序的左侧，以便用户能方便地展开和...

    CSS3垂直手风琴Accordion特效

    【CSS3垂直手风琴Accordion特效】是一种在网页设计中常用的交互元素，它允许用户以折叠的方式展示或隐藏内容，通常用于节省空间并提供清晰的导航。这种效果是基于CSS3的新特性，如伪类、过渡（transition）和动画...

    unigui选项卡_手风琴两种模式

    手风琴（Accordion）则是一种折叠式的布局方式，通常用于有限的空间内展示层次结构的内容。手风琴允许用户展开或折叠各个部分，以便查看或隐藏详细信息。它可以有效地控制屏幕空间，使用户能逐步探索复杂的信息，而...

    Mootools 1.2 手风琴（Accordion）教程

    创建和配置一个基本的手风琴很简单，但是你一定要认真看完全文，因为更多的高级选项可能有一些复杂。 基础知识 创建一个新的手风琴 要创建一个新的手风琴，你需要选择一些成对的元素——包含标题和内容。因此，首先...

    Jquery实现的手风琴特效-Accordion

    手风琴（Accordion）是一种常见的用户界面元素，尤其在网页设计中被广泛使用。它通过折叠和展开的方式展示内容，可以有效地节省空间，提高用户体验。本篇将详细讲解如何使用jQuery来实现一个手风琴效果。 一、...

    简洁的CSS3滑动手风琴切换特效

    本教程将详细讲解如何利用CSS3实现一个简洁且具有滑动手风琴切换特效的菜单，该菜单特别适用于内容分类展示，如FAQ或导航栏。这个特效是基于Font Awesome图标库实现的，它提供了大量的矢量图标，使设计更加美观。 ...

    jquery ui accordion手风琴插件带动画的竖直手风琴

    在网页开发中，jQuery UI 是一个非常流行的库，它提供了许多可重用的用户界面组件，包括我们今天要讨论的“Accordion（手风琴）”功能。jQuery UI Accordion 是一个垂直折叠的内容区域，允许用户逐个展开或收起内容...

    Bootstrap Accordion手风琴特效.zip

    Bootstrap Accordion手风琴特效是基于流行的前端框架Bootstrap的一个组件，它通过...通过理解和应用这些知识点，开发者可以轻松地在自己的项目中集成Bootstrap Accordion手风琴特效，提升网站的互动性和视觉吸引力。

    accordion2手风琴滑动门效果

    在IT行业中，手风琴（Accordion）滑动门效果是一种常见的网页交互设计，它通过折叠和展开的内容区域来节省空间并提高用户体验。标题中的“accordion2”指的是一个特定的实现这种效果的版本或库，可能是对传统手风琴...

    Accordion手风琴效果折叠菜单jquery完整版.rar

    5. **使用方法**: 要使用这个插件，你需要在页面中引入jQuery库和Accordion插件的JavaScript文件，然后可以通过编写简单的JavaScript代码或使用HTML数据属性来初始化和配置手风琴效果。 6. **配置选项**: jQuery ...

    Bootstrap Accordion手风琴选项卡代码.zip

    Bootstrap Accordion手风琴选项卡代码是一个流行的网页设计组件，尤其在构建响应式和交互性强的网站时。这个组件基于Bootstrap框架，一个广泛使用的前端开发工具包，它提供了丰富的样式、组件和JavaScript插件，帮助...

    Window风格的手风琴菜单

    手风琴菜单是一种常见的网页交互元素，它在有限的空间内展示多级导航，用户可以展开或折叠各个菜单项，类似于音乐盒中的手风琴乐器。在网页设计中，这种菜单通常用于节省空间并提高用户体验。"Window风格"的手风琴...

    Bootstrap Accordion手风琴选项卡代码

    7. **实际应用**：在实际项目中，Bootstrap Accordion可以与其他Bootstrap组件结合使用，如导航栏、表单、模态框等，以创建复杂而富有层次的用户界面。 总结起来，"Bootstrap Accordion手风琴选项卡代码"涉及到...

    vueaccordionmenuVue2中简单的手风琴菜单组件

    Vue Accordion Menu（手风琴菜单）就是这样一个组件，它允许用户在一个有限的空间内展示多级导航，只展开单个子菜单，从而保持界面整洁。在本篇文章中，我们将深入探讨如何在Vue 2中实现一个简单的手风琴菜单组件。 ...

    accordion.js垂直手风琴点击标题切换图片

    在本例中，"accordion.js"是一个JavaScript库，专门用于实现垂直方向上的手风琴效果，并且与图片切换功能相结合，当用户点击标题时，不仅会展开或关闭内容，还会切换显示相关的图片。 首先，我们需要理解"accordion...

    【Jquery经典特效21】jQuery手风琴效果插件j-accordion

    jQuery手风琴效果插件j-accordion是网页交互设计中常用的一种组件，它将一系列内容按照垂直方向排列，用户可以逐个展开或关闭这些内容块，就像手风琴的伸缩一样，故得名“手风琴效果”。这种效果在网站的导航、FAQs...

    PC用手风琴展示效果

    在PC端，手风琴（Accordion）是一种常见的交互设计元素，它通过折叠和展开的方式，有效地组织和显示大量信息，使用户能够有选择地查看内容，提高用户体验。在这个项目中，"PC用手风琴展示效果"是利用jQuery库实现的...

Magicbox
Global site tag (gtag.js) - Google Analytics