欢迎来到 jackNEss'窝窝
I like simple mind

手风琴式图片展示窗

2011年10月16日

手风琴式图片展示窗

图片展示窗各种各样,五花百门,今天为大家介绍的是手风琴式的图片展示窗。

工作原理:

通过改变 margin 负边距数值来实现手风琴特效

核心代码:

瀑布式算法( 数组中数值之和不变,其中一个增加的时候,那么在确保数值大于0的前提下,其他的就要减去相应的值.)

/*
 * 瀑布式算法( 数组中数值之和不变,其中一个增加的时候,那么在确保数值大于0的前提下,其他的就要减去相应的值.)
 * - array:int int数组集合
 * - index 要发生变化的 数组下标
 * - num 要发生变化的 数组 的数值
 * - sum 数组内int的总和
 */
function accordionAccount(array,index,num,sum){
	num = parseInt(num);
	account = num - array[index];
	var total = 0;
	//alert(account);
	for(var i = 0; i < array.length; i++){
		i == index?(
			array[i] = num
			
		):(
			array[i] - account >= 0?(
				array[i] -= account,
				account = 0
			):(
				array[i] = 0,
				account -= array[i]
			)
			
		);
		total += array[i];
		//确保 数组加起来总和一致...
		if(i == array.length -1 && total != sum){
			array[i] = array[i] + sum - total;
		}
	}
	return array
	
}

演示地址:http://www.jackness.org/lab/object/accordion_slide/demo.html

JS源码部分:

/*
 * 手风琴式 slide box(注意的是,这个函数对使用环境有点要求,html部分手风琴特效通过改变 margin 负边距数值来实现)
 * accordion_slide(option)
 * -option{
		target:目标对象,里面的内容即为要进行 手风琴特效的对象
		insertWidth:手风琴中图像显示的宽度
		direction:手风琴方向 left|top|right|bottom
		effectType:手风琴特效的触发方式
		transition:动画缓动时间
		autoInterval:自动播放时间间隔
		isAuto:是否自动播放
		interval:每帧动画时间间隔
	}
 * accordion_slide.setOption(op)属性设置
 * accordion_slide.beforeEffectEvent(func) 设置触发事件时调用的函数,其中函数中的 this 指向 触发事件的对象
 * accordion_slide.afterEffectEvent(func) 设置触发事件后调用的函数,其中函数中的 this 指向 触发事件的对象
 * accordion_slide.init() 函数执行
 * ----------------------------------------------
 * example:
   accordion_slide({target:"#accord_list",insertWidth:600,direction:"left"}).init();
 * ----------------------------------------------
 * power by jackNEss
 * date: 2011-10-16
 * ver: 1.0
 */

var accordion_slide = function(){
	//默认属性
	var option = {
		//目标对象,里面的内容即为要进行 手风琴特效的对象
		target:null,
		
		//手风琴中图像显示的宽度
		insertWidth:0,
		
		//手风琴方向 left|top|right|bottom
		direction:"Left",
		
		//手风琴特效的触发方式
		effectType:"mouseover",
		
		//动画缓动时间
		transition:200,
		
		//自动播放时间间隔
		autoInterval:3000,
		
		//是否自动播放
		isAuto:true,
		
		//每帧动画时间间隔
		interval:20
	}
	
	var _op;
	arguments[0]? _op = arguments[0]:"";
	
	var _cells,_outset;
	var _key,_nowIndex,_autoKey;
	var _beforeEvent,_afterEvent;
	
	function easy_switch(elm){
		if(typeof elm == "string"){
			var strs = elm.split(" ");
			var targetElements = [document.body];
			for(var i = 0; i < strs.length; i++){
				if(!targetElements){return false;}
				var flagGroups = new Array();
				
				for(var j = 0; j < targetElements.length; j++ ){
					
					var datasource = typeSwitcher(targetElements[j],strs[i]);
					if(!datasource){return false;}
					if(!datasource.length){
						if(datasource){
							flagGroups.push(datasource);
						}
					}
					else{
						
						for(var k = 0; k < datasource.length; k++){
							if(datasource[k]){
								flagGroups.push(datasource[k])
							}
						}	
					}
					
				}
				targetElements = flagGroups;
			}
			if(targetElements.length ==1){return targetElements[0]}
			else {return targetElements;}
		}
		else{
			return elm;	
		}
		function typeSwitcher(elm,str){
			
			if(str.substring(0,1) == "#"){
				return document.getElementById( str.substring(1,str.length) )	
			}
			else if(str.substring(0,1) == "."){
				var flag = elm.getElementsByTagName("*");
				var results = [];
				var classStr = str.substring(1,str.length);
				var classNames;
				for(var i = 0; i < flag.length; i++ ){
					classNames = flag[i].className.split(" ");
					
					for( var j = 0; j < classNames.length; j++ ){
						if( classStr == classNames[j] ){
							results.push(flag[i]);	
						}
					}
				}
				return results;
			}
			else{
				var result = elm.getElementsByTagName(str)	
				if(result.length >0){
					return result;	
				}
				else{
					return false;	
				}
			}
		}
	}
	
	
	function getCssValue(elm,attribute){
		try{
			return	elm.currentStyle?elm.currentStyle[attribute]:document.defaultView.getComputedStyle(elm,false)[attribute];
		}
		catch(e){
			return false;
		}	
	}
	
	//惯性运动
	function inertia_Motion(So,St,T){
		var S = Math.abs(St - So);
		var a = S/Math.pow(T/2,2);
		var Vt = a*T/4;
		
		
		return{
			Sn:function(Tn){
				var _Sn;
				Tn < T/2?(
					_Sn = So + a*Math.pow(Tn,2)/2 * ( parseInt( (St - So)/Math.abs(St - So) )||0 )
				):(
					Tn < T?(
						_Sn = So +  ( a*Math.pow(T/2,2)  - a*Math.pow(T - Tn,2)/2 )*( parseInt( (St - So)/Math.abs(St - So) )||0 )
					):(
						_Sn =  St
					)
				);
				
				return _Sn;
			},
			Vn:function(Tn){
				var _Vn;
				Tn < T/2?(
					_Vn = a*Tn/2
				):(
					Tn < T?(
						_Vn = Vt - a*(Tn - T/2)/2
					):(
						_Vn = 0
					)
				);
				return _Vn;
			}	
		}
	}
	
	function areaReset(){
		
		//外框初始化
		_outset = document.createElement("outset");
		_outset.style.cssText = "position:relative;display:block;width:100%; height:" + getCssValue(option.target,"height") + ";overflow:hidden;";
		
		var frag = document.createDocumentFragment();
		var array = [];
		
		for(; option.target.children.length > 0; ){
			frag.appendChild( option.target.children[0] );
		}
		
		option.target.appendChild(_outset);
		_outset.appendChild(frag);
		frag = null;
		
		//手风琴元素初始化
		_cells = _outset.children;
		for( var i = 0; i < _cells.length; i++ ){
			_cells[i].style.position = "relative";
			_cells[i].style.zIndex = _cells.length - i;
			
			i == 0 ?_cells[i].insertWidth = option.insertWidth:_cells[i].insertWidth = 0;
			array[i] = _cells[i].insertWidth;
			
			//添加事件
			_cells[i]["on" + option.effectType] = function(){
				effectEvent.call(this);
			}
			
		}
		_nowIndex = 0;
		
		//元素插入深度初始化
		elementInsertWidthInit(array);
	}
	
	//元素插入深度初始化
	function elementInsertWidthInit(array){
		for( var i = 0; i < _cells.length; i++){
			_cells[i].insertWidth = array[i];
			_cells[i].style["margin" + option.direction] = -option.insertWidth + _cells[i].insertWidth + "px";
		}
	}
	
	/*
	 * 瀑布式算法( 数组中数值之和不变,其中一个增加的时候,那么在确保数值大于0的前提下,其他的就要减去相应的值.)
	 * - array:int int数组集合
	 * - index 要发生变化的 数组下标
	 * - num 要发生变化的 数组 的数值
	 * - sum 数组内int的总和
	 */
	function accordionAccount(array,index,num,sum){
		num = parseInt(num);
		account = num - array[index];
		var total = 0;
		//alert(account);
		for(var i = 0; i < array.length; i++){
			i == index?(
				array[i] = num
				
			):(
				array[i] - account >= 0?(
					array[i] -= account,
					account = 0
				):(
					array[i] = 0,
					account -= array[i]
				)
				
			);
			total += array[i];
			//确保 数组加起来总和一致...
			if(i == array.length -1 && total != sum){
				array[i] = array[i] + sum - total;
			}
		}
		return array
		
	}
	
	//触发的事件
	function effectEvent(){
		var index;
		var array = [];
		for( var i = 0; i < _cells.length;i++ ){
			array[i] = _cells[i].insertWidth;
			_cells[i] == this? index = i:"";
		}
		
		if( index == _nowIndex){return;}
		
		_beforeEvent?_beforeEvent.call(this):"";
		
		var Tn = 0;
		var T = option.transition/option.interval||0;
		var St = option.insertWidth;
		var So =_cells[index].insertWidth;
		
		if(_key){ clearTimeout(_key); }
		if(_autoKey){ clearTimeout(_autoKey);}
		_effectEvent();
		
		function _effectEvent(){
			
			Tn < T?(
				elementInsertWidthInit( accordionAccount(array,index,inertia_Motion(So,St,T).Sn(Tn),option.insertWidth) ),
				Tn++,
				_key = setTimeout(_effectEvent,option.interval)
			):(
				elementInsertWidthInit( accordionAccount(array,index,inertia_Motion(So,St,T).Sn(T),option.insertWidth) ),
				_nowIndex = index,
				_afterEvent?_afterEvent.call(this):"",
				option.isAuto? _autoKey = setTimeout(autoRunEvent,option.autoInterval):""
				
			);
			
		}
		
	}
	
	//自动播放
	function autoRunEvent(){
		
		var index = _nowIndex;
		index < _cells.length - 1?index+=1:index =0;
		effectEvent.call(_cells[index])
	}
	
	return{
		setOption:function(op){
			op.target? option.target = easy_switch(op.target):"";
			op.insertWidth? option.insertWidth = parseInt(op.insertWidth):"";
			op.direction? option.direction = op.direction.substring(0,1).toUpperCase() + op.direction.substring(1,op.direction.length):"";
			op.effectType? option.effectType = op.effectType:"";
			op.transition? option.transition = parseInt(op.transition):"";
			op.autoInterval? option.autoInterval = parseInt(op.autoInterval):"";
			
			op.interval? option.interval = parseInt(op.interval):"";
			typeof op.isAuto == "bool"? option.isAuto = op.isAuto:"";
			
			return this;
		},
		beforeEffectEvent:function(func){
			_beforeEvent = func;
			return this;
		},
		afterEffectEvent:function(func){
			_afterEvent = func;
			return this;
		},
		init:function(){
			if(_op){ this.setOption(_op);}
			if( !option.target ){return;}
			areaReset();
			
			if(option.isAuto){autoRunEvent();}
		}
	}
	
}
分类javascript
阅读 1,166
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS