回旋查看内容控件

今天终于把这个插件的原理搞清楚了，并自己写了一个，有待完善！

.roundabout{width:500px; height:300px; background:#6FF; position:relative;}
.roundabout li{width:300px;height:250px;background:#f60; position:absolute;}
.roundabout li.item1{z-index:5;left:100px;top:25px;}
.roundabout li.item2{z-index:4;height:200px;left:200px;top:50px; opacity:0.8;}
.roundabout li.item3{z-index:3;height:150px;left:150px;top:75px; opacity:0.6;}
.roundabout li.item4{z-index:3;height:150px;left:50px;top:75px; opacity:0.6;}
.roundabout li.item5{z-index:4;height:200px;left:0px;top:50px; opacity:0.8;}

　　

<ul class="roundabout">
  <li class="item1 current">Block 1</li>
  <li class="item2">Block 2</li>
  <li class="item3">Block 3</li>
  <li class="item4">Block 4</li>
  <li class="item5">Block 5</li>
</ul>

　　

/**
@基于jquery的回旋查看内容插件
@2013-04-22
@杨永 QQ377746756
*/
function Roundabout(o){
	var _this_=this;
	this.t=null;
	this.o=o;//保存传递进来的对象
	this.frames=$("li",this.o);//保存所以帧
	//初始化对象相对于页面的偏移值和自身的宽度一半
	this.offsetValue={x:this.o.offset().left,y:this.o.offset().top,width:this.o.width()/2};
	this.framesLength=this.frames.size();
	this.frames.click(function(e){
				//如果点击的对象处于当前状态取消执行
				if($(this).hasClass("current")){return true};
				if(_this_.GetCursorPos(e.pageX)=="clockwise"){
					_this_.clockwise(this);
					}else if(_this_.GetCursorPos(e.pageX)=="anticlockwise"){
						_this_.anticlockwise(this);
						};	
		});
	};
Roundabout.prototype={
	clockwise:function(thisObj){//顺时针旋转
		var _this=this;
		_this.inFocus(thisObj);
		this.frames.each(function(i,element){
				if(i==0){
						_this.frames.eq(i).animate({
						zIndex:_this.frames.last().css("zIndex"),
						height:_this.frames.last().css("height"),
						width:_this.frames.last().css("width"),
						left:_this.frames.last().css("left"),
						top:_this.frames.last().css("top"),
						opacity:_this.frames.last().css("opacity")
						},"fast");
					}else{
						_this.frames.eq(i).animate({
						zIndex:_this.frames.eq(i).prev().css("zIndex"),
						height:_this.frames.eq(i).prev().css("height"),
						width:_this.frames.eq(i).prev().css("width"),
						left:_this.frames.eq(i).prev().css("left"),
						top:_this.frames.eq(i).prev().css("top"),
						opacity:_this.frames.eq(i).prev().css("opacity")
						},"fast");
					}
			});
		
		},
	anticlockwise:function(thisObj){//逆时针旋转
		var _this=this;
		_this.inFocus(thisObj);
			this.frames.each(function(i,element){
					if(i==_this.framesLength-1){
							_this.frames.eq(i).animate({
							zIndex:_this.frames.first().css("zIndex"),
							height:_this.frames.first().css("height"),
							width:_this.frames.first().css("width"),
							left:_this.frames.first().css("left"),
							top:_this.frames.first().css("top"),
							opacity:_this.frames.first().css("opacity")
							},"fast");
						}else{
							_this.frames.eq(i).animate({
								zIndex:_this.frames.eq(i).next().css("zIndex"),
								height:_this.frames.eq(i).next().css("height"),
								width:_this.frames.eq(i).next().css("width"),
								left:_this.frames.eq(i).next().css("left"),
								top:_this.frames.eq(i).next().css("top"),
								opacity:_this.frames.eq(i).next().css("opacity")
							},"fast");
						}
				});
			
		},
	inFocus:function(thisObj){//标识为当前
		$(thisObj).addClass("current").siblings().removeClass("current");
		},
	GetCursorPos:function(mouseClickX){//获取鼠标点击时的位置，并返回对应的字符说明
		//这里查看鼠标点击时相对一对象的X方向的值
		mouseClickX=mouseClickX-this.offsetValue.x;
		var direction="";
		/**
		*如果mouseClickX的值小于控件宽的一半时返回anticlockwise执行逆时针，大于时返回clockwise顺时针
		*/
			direction=mouseClickX>=this.offsetValue.width?"clockwise":"anticlockwise";
			return direction;
		}
	};

var roundabout=new Roundabout($(".roundabout").eq(0));