
?<script type="text/javascript">
/**
@开发:杨永
@功能:实现细节放大,图片对应切换,自由定义css样式实现自由铺满视口等功能
@说明:基于jQ的放大镜插件,可根据需要自由调整布局来适应各种设计效果
*/
(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();//初始化并计算出需要的比例值
//以下是小图部分的功能实现
this.l=0;
this.scrollObj=$(".slideMain ul",object);//保存ul滚动对象
this.lis=this.scrollObj.children();//保存小图片列表
this.btnR=$(".btnR",object);//保存右边按钮
this.btnL=$(".btnL",object);//保存左边边按钮
this.lis.click(function(){
_this_.changeImgSrc(this);
});
if(this.lis.length>6){//判断图片数是否超出显示区域,是的话就注册滚动事件
this.s=this.lis.length-6;//获取多余出来的图片数
this.scrollObj.width(60*this.lis.length+"px");//当图片数超出默认值时,设置ul的宽度
this.btnL.click(function(){_this_.scrollRight();}).mouseover(function(){$(this).addClass("hover")}).mouseout(function(){$(this).removeClass("hover");});
this.btnR.click(function(){_this_.scrollLeft();}).mouseover(function(){$(this).addClass("hover")}).mouseout(function(){$(this).removeClass("hover");});;
}
&nb

