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

slide框图片展示窗

2011年09月23日

slide-box

工作原理:

通过改变对象的scrollLeft/scrollTop从而实现滚动效果。

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

JS源码部分:

// JavaScript Document
/* 图片幻灯窗
 * slideShow(effectArea,instructBtns,option)
 * -effectArea:  slide框对象(滚动内容 的 父级)
 * -instructBtns:  指示性质按钮集合
 * -option:{
		effectArea:  slide框对象(滚动内容 的 父级)
		leftBtn:  向左按钮
		rightBtn:  向右按钮
		instructBtns:  指示性质按钮集合
		isAuto:  是否自动滚动
		autoInterval:  自动循环间隔
		transition:  动画过度时间
		slideDirection: 'x' or 'y' 滚动方向
		effectType:"mouseover" or "click"  触发方式
		btnsToggleClass: 设置当事件触发时简易的按钮样式添加
		interval: 每帧动画播放间隔
	}
 * slideShow.setBeforeSlideEvent(func)  设置事件触发前发生事件
 * -func 此函数中的 this 指向为触发事件的当前 指示性质按钮
 *
 * slideShow.setAfterSlideEvent(func)  设置事件触发后发生事件
 * -func 此函数中的 this 指向为触发事件的当前 指示性质按钮
 *
 * slideShow.setOption(option)  属性设置
 
 * slideShow.init();函数执行
 *
 * -------------------------------------------------------
 * example:
   完整版:
   slideShow("#slideArea","#slide_btnArea i",{
		leftBtn:"#slide_ltBtn",
		rightBtn:"#slide_rtBtn",
		isAuto:true,
		autoInterval:3000,
		transition:500,
		slideDirection:"x",
		effectType:"mouseover",
		btnsToggleClass:"cur"
	}).setBeforeSlideEvent(function(){}).setAfterSlideEvent(function(){}).init();
	
	//没左右按钮版
	 slideShow("#slideArea","#slide_btnArea i",{isAuto:true,slideDirection:"x",btnsToggleClass:"cur"}).init();
 * -------------------------------------------------------
 *
 * power by jackness
 * date:2011-10-12
 * ver 2.1
 */

var slideShow = function(){
	
	// 用户设置 start
	
	var option ={
		
		//slide框对象(滚动内容 的 父级)
		effectArea:null,
		
		//向左按钮
		leftBtn:null,
		
		//向右按钮
		rightBtn:null,
		
		//指示性质按钮集合
		instructBtns:null,
		
		//是否自动滚动
		isAuto:false,
		
		//自动循环间隔
		autoInterval:3000,
		
		//动画过度时间
		transition:500,
		
		//滚动方向
		slideDirection:"x",
		
		//触发方式
		effectType:"mouseover",
		
		//设置当事件触发时简易的按钮样式添加
		btnsToggleClass:"",
		
		//每帧动画播放间隔
		interval:20
	}
	
	// 用户设置 end
	
	var op;
	arguments[0]? option.effectArea = easy_switch( arguments[0] ):"";
	arguments[1]? option.instructBtns = easy_switch( arguments[1] ):"";
	arguments[2]? op = arguments[2]:"";
	
	var _box,_parent;
	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 = [];
				for(var i in flag){
					if(flag[i].className == str.substring(1,str.length)){
						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 getElmIndex(elm){
		for( var i in elm.parentNode.children){
			if(elm.parentNode.children[i] == elm){return i;}	
		}
		return -1;
	}
	
	//惯性运动
	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(){
		_box = document.createElement("outset");
		
		_box.style.width = "100%";
		_box.style.height = "100%";
		_box.style.display = "block";
		_box.style.overflow = "hidden";
		
		_box.intervalKey;
		_box.transitionKey;
		_box.scrollType;
		_box.isHover = false;
		_box.cellSize = 0;
		_box.nowIndex = 0;
		_box.targetIndex = 0;
		
		_parent = document.createElement("parent");
		_parent.style.display = "block";
		_parent.innerHTML = option.effectArea.innerHTML;
		
		option.effectArea.innerHTML = "";		
		option.effectArea.appendChild(_box);
		
		_box.appendChild(_parent);
		
		option.slideDirection == "x"?(
			_parent.style.width = "10000px",
			_box.scrollType = "scrollLeft",
			_box.cellSize = _parent.children[0].offsetWidth
		):(
			_parent.style.width = "100%",
			_box.scrollType = "scrollTop",
			_box.cellSize = _parent.children[0].offsetHeight		
		);
		
	}
	
	
	//动画
	function transitionEvent(index){
		var targetIndex = index;
		targetIndex >= _parent.children.length? targetIndex = _parent.children.length - 1:"";
		targetIndex < 0 ? targetIndex = 0:"";
		_box.targetIndex = parseInt(targetIndex);
		
		if(option.btnsToggleClass != "" && option.instructBtns){
			for(var i = 0; i < option.instructBtns.length; i++){
				i == targetIndex ? option.instructBtns[i].className = option.btnsToggleClass : option.instructBtns[i].className ="";	
			}	
		}
		
		if(_beforeEvent){try{_beforeEvent.call(option.instructBtns[targetIndex]);}catch(e){}}

		if(_box.transitionKey){clearTimeout(_box.transitionKey);}
		if(_box.intervalKey){clearTimeout(_box.intervalKey);}
		
		var T = option.transition/option.interval;
		var Tn = 0;
		var So = _box[_box.scrollType];
		var St = _box.cellSize*_box.targetIndex;
		var ev = new inertia_Motion(So,St,T);
		
		function mEvent(){
			if(Tn < T){
				_box[_box.scrollType] = ev.Sn(Tn);
				Tn++;
				_box.transitionKey = setTimeout(mEvent,option.interval)
			}
			else{
				_box[_box.scrollType] = _box.targetIndex*_box.cellSize;
				_box.nowIndex = _box.targetIndex;
				
				if(_afterEvent){try{_afterEvent.call(option.instructBtns[targetIndex]);}catch(e){}}
				
				if(option.isAuto){
					_box.intervalKey = setTimeout(intervalEvent,option.autoInterval)
				}
			}	
		}
		mEvent();
	}
	
	function intervalEvent(){
		
		var index = _box.nowIndex +1;
		index >= _parent.children.length? index = 0:"";
		if(_box.isHover){
			setTimeout(intervalEvent,option.interval)	
		}
		else{
			transitionEvent(index)
		}
	}
	
	return{
		
		//设置事件触发前发生事件
		setBeforeSlideEvent:function(func){
			_beforeEvent = func;
			return this;
		},
		
		//设置事件触发后发生事件
		setAfterSlideEvent:function(func){
			_afterEvent = func;
			return this;
		},
		
		//属性设置
		setOption:function(op){
			op.effectArea?option.effectArea = easy_switch( op.effectArea ):"";
			op.leftBtn?option.leftBtn = easy_switch( op.leftBtn ):"";
			op.rightBtn?option.rightBtn = easy_switch( op.rightBtn ):"";
			op.instructBtns?option.instructBtns = easy_switch( op.instructBtns ):"";
			op.isAuto?option.isAuto = op.isAuto:"";
			
			op.autoInterval?option.autoInterval = op.autoInterval:"";
			op.transition?option.transition = op.transition:"";
			op.slideDirection?option.slideDirection = op.slideDirection:"";
			op.effectType?option.effectType = op.effectType:"";
			op.btnsToggleClass?option.btnsToggleClass = op.btnsToggleClass:"";
			
			op.interval?option.interval = op.interval:"";
		},
		
		//函数执行
		init:function(){
			if(!option.effectArea){return;}
			
			if(op){this.setOption(op);}
			areaReset();
			
			if(option.leftBtn){
				option.leftBtn.onclick = function(){
					var targetIndex = _box.targetIndex - 1
					targetIndex >= _parent.children.length? targetIndex = 0:"";
					targetIndex < 0 ? targetIndex = _parent.children.length - 1:"";
					
					transitionEvent( targetIndex )		
				}
			}
			
			if( option.rightBtn ){
				option.rightBtn.onclick = function(){
					var targetIndex = _box.targetIndex + 1
					targetIndex >= _parent.children.length? targetIndex = 0:"";
					targetIndex < 0 ? targetIndex = _parent.children.length - 1:"";
					
					transitionEvent( targetIndex )	
				}	
			}
			
			if(option.instructBtns){
				for( var i = 0; i < option.instructBtns.length; i++){
					option.instructBtns[i]["on" + option.effectType] = function(){
						transitionEvent( getElmIndex(this) );
						_box.isHover = true;
					}
					option.instructBtns[i].onmouseout = function(){
						_box.isHover = false;	
					}	
				}	
			}
			if(option.isAuto){
				_box.intervalKey = setTimeout(intervalEvent,option.autoInterval);	
			}
		}	
	}	
}	
分类javascript
阅读 3,382
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

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

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