鼠标滑动察看

#allCasesWrap{border-top:1px solid #ccc;background:url(images/cssPos/shadow.gif) repeat-x left top;position:relative;zoom:1;}

#allCasesWrapBox{height:125px; display:none; position:relative; overflow:hidden;}
#allCasesWrapBox ol{ height:125px; position:relative;}
#allCasesWrapBox ol li{ float:left;}

#allCasesWrapBox ol li img{ display: block;}

.toggleBtn{display:block;cursor:pointer;width:105px;height:20px; background: url(images/cssPos/project_like.png) no-repeat left -275px; position:absolute;bottom:-20px;left:50%;margin-left:-45px;}
.toggle{ background-position:left -296px;}

　　

<div id="allCasesWrap">
    	<div id="allCasesWrapBox">
        	<ol>
            	<li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li class="current"><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
                <li><a href="#" target="_blank"><img src="images/l.jpg" /></a></li>
            </ol>
        </div>
        <span class="toggleBtn"></span>
    </div>

　　

<script type="text/javascript">
function ViewAllCases(obj){
	//保存容器
	this.wrapBox=obj;
	//保存滚动的对象
	this.scrollNode=$("ol",obj);
	//保存案例列表
	this.casesItems=$("li",obj);
	//保存案例个数
	this.casesLength=this.casesItems.length;
	//设置滚动对象的宽度
	this.scrollNode.width(this.casesLength*210);
	//获取窗口的宽度并设置容器的宽
	var _this=this,t,t2,t3;
	//保存toggle按钮
	this.toggleBtn=obj.next();
	this.toggleBtn.click(function(){
			_this.wrapBox.slideToggle();
			$(this).toggleClass("toggle");
		});
	//获取视口宽度并设置容器宽度
	this.windowWidth=$(window).width();
	this.wrapBox.width(this.windowWidth);
	//获取比例
	this.scale=this.scrollNode.width()/this.windowWidth;
	
	//兼容ie6，窗口调整的时候实时获取窗口的宽度
	$(window).resize(function(e) {
			_this.windowWidth=$(window).width();
			_this.wrapBox.width(_this.windowWidth);
			_this.scale=_this.scrollNode.width()/_this.windowWidth;
    	});
	//当鼠标滚动的时候设置对应的值
	this.wrapBox.mousemove(function(e){
				_this.move(e);
		});
	this.casesItems.mouseover(function(e){
			var $this=this;
			t=window.setTimeout(function(){
				_this.opacityCurrent($this);
				},200);
		}).mouseout(function(e){
				window.clearTimeout(t);
			});
	this.scrollNode.mouseout(function(e){

		var $this=this;
		t2=window.setTimeout(function(){
				$($this).children().css("opacity",1);
				_this.gotoCurrent();
			},500);
		}).mouseover(function(){
			
			window.clearTimeout(t2);
			});
		$(function(){
			_this.wrapBox.delay(1000).slideDown("slow",function(){_this.gotoCurrent();});
		});
	};
ViewAllCases.prototype={
	move:function(e){
		var v=e.clientX*this.scale-this.windowWidth<=0?0:e.clientX*this.scale-this.windowWidth;
		this.scrollNode.stop().css("marginLeft",-v+"px");
		},
	opacityCurrent:function(thisObj){
		$(thisObj).css("opacity",1).siblings().css("opacity",0.6);
		},
	gotoCurrent:function(){
		var currentLeftValue=this.scrollNode.children(".current").position().left-this.windowWidth/2+105;
		currentLeftValue=currentLeftValue<=0?0:currentLeftValue;
			this.scrollNode.animate({marginLeft:-currentLeftValue+"px"},"slow",function(){
					$(this).children(".current").siblings().fadeTo("slow",0.5).end().fadeIn();
				});
		}
	};

$(function(){
	var viewAllCases=new ViewAllCases($("#allCasesWrapBox"));
	});
</script>