myGzoom--图片弹出层（仿windows照片查看器，可缩放抓取移动）


html:

<div id = "lightbox" style="padding:0;"></div>

<div id="picDiv"></div>

<a class="pic" href="javascript:;"><img/></a>

.

.

.

<a class="pic" href="javascript:;"><img/></a>

1、实现点击class为pic的图片时弹出大图

2、可滚轮放大和随意移动。

3、能切换图片。

4、兼容ie7-11、FF、chrome、360.

gzoom.js

function big() {

var src = $("#viewArea").attr("src");

var tmpImage = new Image();

tmpImage.src = src;

var ow = tmpImage.width;

var pw = $("#viewArea").width() * 1.1;

if (pw > ow) {

} else {

$("#viewArea").attr("width", pw);

}

}

function small() {

var vw = $("#zoom04").width();

var pw = $("#viewArea").width() * 0.9;

if (pw < vw) {

$("#viewArea").attr("width", vw);

} else {

$("#viewArea").attr("width", pw);

}

}

var ctr = '<div id="ctr" style="margin-left:auto;margin-right:auto;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;'

+ 'text-align:center;height:36px;background:white;">'

+ '<a href="javascript:;" onclick="javascript:changePic(0);" title="上一张"><img src="../img/lightbox_prev.png"/></a>'

+ '<a id="small" style="cursor: pointer;margin:0 10px;" onclick="javascript:small();" title="缩小"><img src="../img/-.png"/></a>'

+ '<a id="big" onclick="javascript:big();" style="cursor: pointer;margin:0 10px;" title="放大"><img src="../img/+.png"/></a>'

+ '<a href="javascript:;" onclick="javascript:changePic(1);" title="下一张"><img src="../img/lightbox_next.png"/></a><a id="_top"></a>'

+ '</div>';

function changePic(change) {

var picN = $("a[class^=pic]").children().length;

var srcs = [];

$("a[class^=pic]").children().each(function() {

srcs.push($(this).attr("src"));

});

var cPic = $("#viewArea").attr("src");

var cN = 0;

var i = 0;

for (; i < picN; i++) {

if (cPic == srcs[i]){

break;

}

}

$("#picDiv").empty();

if(change == 1){//下一张

i++;

if(i>=picN){

i=0;

}

}else{//上一张

i--;

if(i<0){

i=picN-1;

}

}

var src = srcs[i];

var tmpImage = new Image();

tmpImage.src = src;

// 浏览器的宽高

var bh = $(window).height() * 0.9, bw = $(window).width() * 0.9;

var scrollTop = $(document).scrollTop();

// 图片的宽高

var ph = tmpImage.height, pw = tmpImage.width;

var sh = ph, sw = pw;

if (ph > bh) {

sh = bh - 36;

sw = (sh * pw) / ph;

if(sw>bw){

sw = bw;

sh = (sw * ph) / pw;

}

}

if(sw<300){

sw=300;

if(pw !=0&&ph!=0){

sh = sw * ph / pw;

}else{

sh = 300;

}

}

// 与浏览器的上下距离

var py = 0;

if(ph < bh){

py = (bh-sh)/2;

}

var picDivImage = '<div id="zoom04"><img name="viewArea" id="viewArea" src="'

+ src + '" alt="pic" title="" /></div>';

$("#picDiv").append(picDivImage);

$("#viewArea").attr("width", sw);

$("#zoom04").addClass("zoom");

$("#zoom04").css("width", sw);

$("#zoom04").css("height", sh);

var ctrW = sw + 24;

$("#picDiv").append(ctr);

$("#ctr").css("width",ctrW);

$("#picDiv").prepend('<div title="关闭" style="margin:auto;margin-top:'+py+'px;left:0;text-align:right;'

+'width:'+ctrW+'px;height:36px;"><img class="close" style="width:36px;height:36px;overflow:hidden;'

+'position:relative;top:20px;right:-12px;" src="../img/x.png" /></div>');

picMove();

//加入Mozilla的事件listerner

　　if(window.addEventListener){

　　document.addEventListener('DOMMouseScroll',picZoom, false);

　　//for IE/OPERA etc

　　document.onmousewheel = picZoom;

}

window.onmousewheel=document.onmousewheel=picZoom;

$(".close").click(function() {

closeLightBox();

});

}

$(function() {

$("a[class^=pic]").click(

function() {

var ie6=!-[1,]&&!window.XMLHttpRequest;

if(ie6){

return null;

}

var src = $(this).children().attr("src");

var tmpImage = new Image();

tmpImage.src = src;

// 浏览器的宽高

var bh = $(window).height() * 0.9, bw = $(window)

.width() * 0.9;

var scrollTop = $(document).scrollTop();

$("html").css("height",bh);

// 图片的宽高

var ph = tmpImage.height, pw = tmpImage.width;

//显示框的宽高

var sh = ph, sw = pw;

if (ph > bh) {

sh = bh-36;//预留图片切换按钮空间

sw = sh * pw / ph;

if(sw>bw){

sw = bw;

sh = sw * ph / pw;

}

}

if(sw<300){

sw=300;

if(pw !=0&&ph!=0){

sh = sw * ph / pw;

}else{

sh = 300;

}

}

// 与浏览器的上下距离

var py = 0;

if(ph < bh){

py = (bh - sh) / 2;

}

var picDiv = '<div id="zoom04"><img name="viewArea" id="viewArea" src="'

+ src + '" alt="pic" title="" /></div>';

$("#lightbox").removeClass("empty");

$("#picDiv").removeClass("empty");

$("html").css("overflow","hidden");

$("#lightbox").addClass("lightbox");

$("#lightbox").css("top",scrollTop);

$("#picDiv").addClass("picdiv");

$("#picDiv").append(picDiv);

$("#viewArea").attr("width", sw);

$("#zoom04").addClass("zoom");

$("#zoom04").css("width", sw);

$("#zoom04").css("height", sh);

var ctrW = sw + 24;

$("#picDiv").append(ctr);

$("#ctr").css("width",ctrW);

$("#picDiv").prepend('<div title="关闭" style="margin:auto;margin-top:'+py+'px;left:0;text-align:right;'

+'width:'+ctrW+'px;height:36px;"><img class="close" style="width:36px;height:36px;overflow:hidden;'

+'position:relative;top:20px;right:-12px;" src="../img/x.png" /></div>');

picMove();

//加入FF浏览器的事件listerner

　　if(window.addEventListener){

　　document.addEventListener('DOMMouseScroll',picZoom, false);

　　//for IE/OPERA etc

　　document.onmousewheel = picZoom;

}

//其他浏览器

window.onmousewheel=document.onmousewheel=picZoom;

$(".close").click(function() {

closeLightBox();

});

});

});

document.onkeydown = function(e) {

var keyCode = 0;

if(window.event){//IE支持event事件

keyCode = event.keyCode;

}else{

keyCode=e.which;//FF支持传入参数

}

if(keyCode == 13||keyCode == 27){

closeLightBox();

}

}

//鼠标滚轮事件

function picZoom(event){

var scrollValue = 0;

if (!event) event = window.event;

// normalize the delta

if (event.wheelDelta) {

// IE and Opera

scrollValue = event.wheelDelta;

}else if (event.detail){

// W3C (FF)

scrollValue = -event.detail;

}

if(scrollValue>0){

big();

}else{

small();

}

}

function closeLightBox(){

$("html").css("overflow","");

$("#lightbox").removeClass("lightbox");

$("#lightbox").addClass("empty");

$("#picDiv").removeClass("picdiv");

$("#picDiv").addClass("empty");

$("#picDiv").empty();

$("#lightbox").empty();

$("body").css("opacity", "1");

}

//图片的放大移动

function picMove() {

var pp = document.getElementById("viewArea");

var vv = document.getElementById("zoom04");

var ie = document.all;

var nn6 = document.getElementById && !ie;

var isdrag = false;

var y, x;

var st, sl;

function initDrag(e) {

var oDragHandle = nn6 ? e.target

: event.srcElement;

isdrag = true;

x = nn6 ? e.clientX : event.clientX;

y = nn6 ? e.clientY : event.clientY;

st = vv.scrollTop;

sl = vv.scrollLeft;

document.onmousemove = moveMouse;

return false;

}

function moveMouse(e) {

if (isdrag) {

var mouseX = nn6 ? e.clientX

: event.clientX;

var mouseY = nn6 ? e.clientY

: event.clientY;

vv.scrollTop = st + (y - mouseY);

vv.scrollLeft = sl + (x - mouseX);

return false;

}

}

pp.onmousedown = initDrag;

pp.onmouseup = function() {

isdrag = false;

};

}

gzoom.css

/* 图片放大 */

.picDiv_show{

width: 100%;

height: 100%;

position: absolute;

z-index: 1000;

opacity:1;

}

.zoom{

overflow: hidden;

cursor: pointer;

border: 12px solid white;

border-bottom:0;

margin:auto;

border-top-left-radius: 5px;

left: 0;

}

.close{

overflow:visible;

z-index: 1001;

cursor: pointer;

}

.empty{

width: 0px;

height: 0px;

}

.lightbox{

width: 100%;

height: 100%;

background: url(../img/lightbox_bg.png);

z-index: 1;

position: absolute;

left: 0;

right: 0;

}

.picdiv{

width: 100%;

height: 100%;

position: fixed;

z-index:1000;

opacity:1;

left: 0;

}