view wall

ViewWall : function(options){
var $this = $(options.currImage);
var scrollTop = 0;
var isScroll = false;
var defaults = {
content : "这里空空如也",
imagesArr : undefined,//图片地址数组
currImage : undefined,//当前图片
leftBarCall : undefined,//上一张回调函数
rightBarCall : undefined//下一张回调函数
};
options = $.extend(true, {}, defaults, options);
if(document.getElementById("alertWindow") != null){
$("#alertWindow,#bgWall").remove();
}
var tableWidth = 400;
var tableHeight = 200;
var labelBox = "<div id='label' style='position:absolute; left:0px; top:0px;background-color:#F3F0CD;width:88px; height:20px; text-align:center; line-height:20px;display:none;overflow:hidden;'></div>";
var leftLabel = "点击切换上一张";
var rightLabel = "点击切换下一张";
var leftWall = "<div id='leftBar' style='position:absolute;background:#cccccc;width:50%;height:100%;opacity:0;filter:alpha(opacity=0);cursor:pointer;'></div>";
var rightWall = "<div id='rightBar' style='position:absolute; left:50%;top:0px;background:blue;width:50%;height:100%;opacity:0;filter:alpha(opacity=0);cursor:pointer;'></div>";
var bgWall = "<div id='bgWall' style='width:100%;height:100%;position: absolute;top: 0;left: 0;background-color: black;" +
"opacity:0.4;filter:alpha(opacity=40);z-index:100; display:none;overflow:hidden;'></div>";
var _table = "<div id='alertWindow' style='position: absolute;top: 50%;left: 50%;z-index:101;margin:auto;display:none;overflow:hidden;'>";
_table += leftWall;
_table += options.content;
_table += rightWall;
_table += labelBox;
_table += "</div>";

$("body").append(bgWall);
$("body").append(_table);
$("#bgWall").css({
height:$(document).height() + "px"
});
setTimeout(function(){//延时执行，以便获取div的宽度
$("#alertWindow").css({
"padding" : "0px",
"left" : $(window).width()/2 - $("#alertWindow").width()/2,
"top" : $(window).height()/2 - $("#alertWindow").height()/2 + document.documentElement.scrollTop+document.body.scrollTop
});
}, 100);
var tem = 0;
var bindEvent = function(){
$("#bgWall").unbind("click");
$("#bgWall").click(function(){
$("#bgWall, #alertWindow").fadeOut("fast");
});
$("#alertWindow").unbind("mouseout");
$("#alertWindow").mouseout(function(){
$("#label").stop(true, true).fadeOut();
});
$("#leftBar").unbind("click");
$("#leftBar").click(function(){
if(typeof options.leftBarCall == "function"){
options.leftBarCall();
}
});
$("#rightBar").unbind("click");
$("#rightBar").click(function(){
if(typeof options.rightBarCall == "function"){
options.rightBarCall();
}
});
$("#leftBar").unbind("mousemove");
$("#leftBar").mousemove(function(){
$("#label").stop(true, true).fadeIn();
$("#label").text(leftLabel);
move($("#label"), event);
});
$("#rightBar").unbind("mousemove");
$("#rightBar").mousemove(function(){
$("#label").stop(true, true).fadeIn();
$("#label").text(rightLabel);
move($("#label"), event);
});
scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
}
$("#bgWall, #alertWindow").fadeIn("fast");
if(typeof options.currImage != "undefined"){//内部处理上一张、下一张
options.content = "<img id='contentImg' src='" + options.currImage.src + "'>";
$("#alertWindow").html(leftWall + options.content + rightWall + labelBox);
options.leftBarCall = function(){//上一张
var src = $this.prev().attr("src");
if(typeof src == 'undefined'){
src = $this.parent().find('img:last').attr('src');
$this = $this.parent().find('img:last');
} else {
$this = $this.prev();
}
$("#contentImg").attr('src', src);
};
options.rightBarCall = function(){//下一张
src = $this.next().attr("src");
if(typeof src == 'undefined'){
src = $this.parent().find('img:first').attr('src');
$this = $this.parent().find('img:first');
} else {
$this = $this.next();
}
$("#contentImg").attr('src', src);
}
}
var move = function(obj, event){//鼠标移动
var pos = mousePos(event);
var x = pos.x - ($(window).width()/2 - $("#alertWindow").width()/2) + 15;
var y = pos.y - ($(window).height()/2 - $("#alertWindow").height()/2 + document.documentElement.scrollTop+document.body.scrollTop) + 23;
tem = (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop) - scrollTop;
if(isScroll){
y += (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop) - scrollTop;
isScroll = false;
scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
}
obj.css({
"left" : x,
"top" : y + tem
});
};
var mousePos = function(e){ //获取鼠标坐标
var x,y; 
var e = e||window.event; 
return { 
x : e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft, 
y : e.clientY+document.body.scrollTop + document.documentElement.scrollTop 
}; 
};
bindEvent();//绑定事件
},