jquery放大镜，可随意设置css

/*放大镜*/
.ZoomMain {
    margin:100px;
    width:395px;
    height:460px;
    float:left;
    position:relative;
}
.ZoomMain .zoom {
    height:393px;
    width:393px;
    position:relative;
    border: 1px solid #dcdddd;
}
.ZoomMain .zoom .move{position:absolute;left:0; top:0;display:none;width:200px; height:200px;background:#000;opacity:0.2;filter:Alpha(Opacity=20);}
.ZoomMain .zoomDetail{display:none;border:1px solid red;width:393px; height:393px; position:absolute;right:-405px;top:0px; overflow:hidden;}
.littleImg {
    margin-top:10px;
    height:54px;
    overflow:hidden;
    position:relative;
}
.littleImg span {
    position: absolute;
    display:block;
    width:10px;
    height:55px;
    background:#999;
    cursor:pointer;
}
.littleImg span em {
    display: none;
    width:10px;
    height:55px;
}
.littleImg span.btnL {
    left:0;
    background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left top;
}
.littleImg span.btnL em {
    background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left -57px;
}
.littleImg span.btnR em {
    background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px -57px;
}
.littleImg span.btnR {
    right:0;
    background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px top;
}
.littleImg span.hover em {
    display:block;
}
.littleImg .slideMain {
    width:343px;
    height:55px;
    margin-left:26px;
    overflow:hidden;
    position:relative;
}
.littleImg .slideMain ul {
    position:absolute;
    left:0;
    width:355px;
    padding-top:1px;
}
.littleImg .slideMain ul li {
    float:left;
    margin-right:6px;
    cursor:pointer;
    width:50px;
    height:50px;
    border:1px solid #dbdbdb;
}
.littleImg .slideMain ul li.selected {
    border-color:#999;
}
.littleImg .slideMain ul li img {
    float:left;
    width:50px;
    height:50px;
}
/*放大镜end*/

<!--放大镜-->
<div class="ZoomMain">
  <div class="zoom">
           <span class="move"></span>
           <img width="393" height="390"  src="1347000569971.jpg" />
  </div>
  <div class="littleImg">
       <span class="btnL hover"> <em></em></span>
       <span class="btnR"> <em></em></span>
        <div class="slideMain">
              <ul class="clearfix">
                <li class="selected"><img width="50" height="50" src="1347000569971.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li>
                <li><img width="50" height="50" src="1347000590691.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li>
              </ul>
        </div>
  </div>
  <div class="zoomDetail">
             <img src="1347000569971.jpg" />
  </div>
</div>
<!--放大镜end-->

(function(){
        function Zoom(object){
                 this.zoomArea=$(".zoom",object);//保存促发放大效果的区域
                this.moveArea=$(".move",object);//保存移动区域
                this.zoomDetail=$(".zoomDetail",object);//保存放大镜区域
                this.zoomDetailImg=$("img",this.zoomDetail);//保存放大镜里面的图
                this.zoomAreaWidth=this.zoomArea.width();
                this.moveAreaWidth=this.moveArea.width();
                this.zoomAreaHeight=this.zoomArea.height();
                this.moveAreaHeight=this.moveArea.height();
                this.zoomDetailWidth=this.zoomDetail.width();
                this.zoomDetailHeight=this.zoomDetail.height();
                this.zoomAreaOffset=this.zoomArea.offset();//初始化放大区域在视口中的相对偏移;
                this.XY=null;//初始化鼠标相对于放大区域的偏移偏移值
                this.moveBili=null;//
                var _this_=this;
                this.zoomArea.mousemove(function(e){//当鼠标在放大区域移动的时候执行
                                                 _this_.move(e.pageX,e.pageY);     
                                        }).mouseover(function(){
                                            _this_.moveArea.show();
                                            _this_.zoomDetail.show();
                                            }).mouseout(function(){
                                                _this_.moveArea.hide();
                                                _this_.zoomDetail.hide();                                                
                                                });
                this.calculate();//初始化并计算出
              };
        Zoom.prototype={
            move:function(x,y){//鼠标在放大区域移动的时候执行的函数
                    this.XY=this.mousePosAndSetPos(x,y);//计算出鼠标相对于放大区域的x,y值
                    //设置滑块的位置
                    this.moveArea.css({
                                      left:this.XY.offsetX+"px",
                                      top:this.XY.offsetY+"px"
                                      });
                    //设置大图在细节位置
                    this.zoomDetailImg.css({
                                           marginLeft:-this.XY.offsetX*this.moveBili+"px",
                                           marginTop:-this.XY.offsetY*this.moveBili+"px"
                                           });
                },
            mousePosAndSetPos:function(x,y){//实时计算并设置滑块的位置
                x=x-this.zoomAreaOffset.left-this.moveArea.width()/2;
                y=y-this.zoomAreaOffset.top-this.moveArea.height()/2
                x=x<0?0:x;
                y=y<0?0:y;
                x=x>(this.zoomAreaWidth-this.moveAreaWidth)?this.zoomAreaWidth-this.moveAreaWidth:x;
                y=y>(this.zoomAreaHeight-this.moveAreaHeight)?this.zoomAreaHeight-this.moveAreaHeight:y;
                return {
                        offsetX:x,
                        offsetY:y
                        };    
                },
            calculate:function(){
                    var widthBili,heightBili;
                    //计算移动的滑块与放大镜铺面显示的比例宽高
                    widthBili=(this.zoomAreaWidth*this.zoomDetailWidth)/this.moveAreaWidth;
                    heightBili=(this.zoomAreaHeight*this.zoomDetailHeight)/this.moveAreaHeight;
                    //把比出来的宽高
                    this.zoomDetailImg.css({widthBili+"px",height:heightBili+"px"});
                    //返回移动的比例
                    this.moveBili=(widthBili-this.zoomDetailWidth)/(this.zoomAreaWidth-this.moveAreaWidth);
                }
            };
          var zoom=new Zoom($(".ZoomMain").eq(0));
          
})();