<script type="text/javascript" src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201310/jiaoben1565/js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> (function(e) { function u(u) { function c() { function h(e) { e.show(); n.removeClass("loading") }; //显示遮罩层，并设置其透明度 e('#overlayer').css('opacity','0.6').show();
var t = e(this), r = parseInt(n.css("borderLeftWidth")) || 0,//你原有的错误在这里。修正为：取不到值时默认为0 i = s - r * 2, u = o - r * 2, a = t.width(), f = t.height();
if (a == n.width() && a <= i && f == n.height() && f <= u) { h(t); return } if (a > i || f > u) { var l = u < f ? u: f, c = i < a ? i: a; if (l / f <= c / a) { t.width(a * l / f); t.height(l) } else { t.width(c); t.height(f * c / a) } };
n.animate({ width: t.width(), height: t.height(), marginTop: -(t.height() / 2) - r, marginLeft: -(t.width() / 2) - r }, 200, function() { h(t) }) } if (u) u.preventDefault(); var a = e(this), f = a.attr("href"); if (!f) return; var l = e(new Image).hide(); e("#zoom .previous, #zoom .next").show(); if (a.hasClass("zoom")) e("#zoom .previous, #zoom .next").hide(); if (!r) { r = true; t.show(); e("body").addClass("zoomed") } n.html(l).delay(500).addClass("loading"); l.load(c).attr("src", f); i = a } function a() { var t = i.parent("li").prev(); if (t.length == 0) t = e(".gallery li:last-child"); t.find("a").trigger("click") } function f() { var t = i.parent("li").next(); if (t.length == 0) t = e(".gallery li:first-child"); t.children("a").trigger("click") } function l(s) { if (s) s.preventDefault(); r = false; i = null; t.hide(); e("body").removeClass("zoomed");
//关闭时，隐藏遮罩层 e('#overlayer').hide();
n.empty() } function c() { s = e(window).width(); o = e(window).height() } //增加了遮罩层<div id="overlayer"></div>的输出 e("body").append('<div id="overlayer"></div><div id="zoom"><a class="close"></a><a href="#previous" class="previous"></a><a href="#next" class="next"></a><div class="content loading"></div></div>'); var t = e("#zoom").hide(), n = e("#zoom .content"), r = false, i = null, s = e(window).width(), o = e(window).height(); (function() { t.on("click", function(t) { t.preventDefault(); if (e(t.target).attr("id") == "zoom") l() }); e("#zoom .close").on("click", l); e("#zoom .previous").on("click", a); e("#zoom .next").on("click", f); e(document).keydown(function(e) { if (!i) return; if (e.which == 38 || e.which == 40) e.preventDefault(); if (e.which == 27) l(); if (e.which == 37 && !i.hasClass("zoom")) a(); if (e.which == 39 && !i.hasClass("zoom")) f() }); if (e(".gallery li a").length == 1) e(".gallery li a")[0].addClass("zoom"); e(".zoom, .gallery li a").on("click", u) })(); (function() { e(window).on("resize", c) })(); (function() { e(window).on("mousewheel DOMMouseScroll", function(e) { if (!i) return; e.stopPropagation(); e.preventDefault(); e.cancelBubble = false }) })() })(jQuery); </script></body> </html>
zoom.min.js 文件调整如下 试试 (function(e) { function u(u) { function c() { function h(e) { e.show(); n.removeClass("loading") } var t = e(this), r = parseInt(n.css("borderLeftWidth")), i = s - r * 2, u = o - r * 2, a = t.width(), f = t.height(); r=isNaN(r)?0:r; if (a == n.width() && a <= i && f == n.height() && f <= u) { h(t); return } if (a > i || f > u) { var l = u < f ? u: f, c = i < a ? i: a; if (l / f <= c / a) { t.width(a * l / f); t.height(l) } else { t.width(c); t.height(f * c / a) }
} n.animate({ width: t.width(), height: t.height(), marginTop: -(t.height() / 2) - r, marginLeft: -(t.width() / 2) - r }, 200, function() { h(t) }) } if (u) u.preventDefault(); var a = e(this), f = a.attr("href"); if (!f) return; var l = e(new Image).hide(); e("#zoom .previous, #zoom .next").show(); if (a.hasClass("zoom")) e("#zoom .previous, #zoom .next").hide(); if (!r) { r = true; t.show(); e("body").addClass("zoomed") } n.html(l).delay(500).addClass("loading"); l.load(c).attr("src", f); i = a } function a() { var t = i.parent("li").prev(); if (t.length == 0) t = e(".gallery li:last-child"); t.find("a").trigger("click") } function f() { var t = i.parent("li").next(); if (t.length == 0) t = e(".gallery li:first-child"); t.children("a").trigger("click") } function l(s) { if (s) s.preventDefault(); r = false; i = null; t.hide(); e("body").removeClass("zoomed"); n.empty() } function c() { s = e(window).width(); o = e(window).height() } e("body").append('<div id="zoom"><a class="close"></a><a href="#previous" class="previous"></a><a href="#next" class="next"></a><div class="content loading"></div></div>'); var t = e("#zoom").hide(), n = e("#zoom .content"), r = false, i = null, s = e(window).width(), o = e(window).height(); (function() { t.on("click", function(t) { t.preventDefault(); if (e(t.target).attr("id") == "zoom") l() }); e("#zoom .close").on("click", l); e("#zoom .previous").on("click", a); e("#zoom .next").on("click", f); e(document).keydown(function(e) { if (!i) return; if (e.which == 38 || e.which == 40) e.preventDefault(); if (e.which == 27) l(); if (e.which == 37 && !i.hasClass("zoom")) a(); if (e.which == 39 && !i.hasClass("zoom")) f() }); if (e(".gallery li a").length == 1) e(".gallery li a")[0].addClass("zoom"); e(".zoom, .gallery li a").on("click", u) })(); (function() { e(window).on("resize", c) })(); (function() { e(window).on("mousewheel DOMMouseScroll", function(e) { if (!i) return; e.stopPropagation(); e.preventDefault(); e.cancelBubble = false }) })() })(jQuery);// JavaScript Document
是通过ZOOM.MIN.JS生成和控制的。里面有些JQuery方法 我不会JQuery所以请你们看下
问题确实出现在CSS控制上 请问怎么修改
function u(u) {
function c() {
function h(e) {
e.show();
n.removeClass("loading")
}
var t = e(this),
r = parseInt(n.css("borderLeftWidth")),
i = s - r * 2,
u = o - r * 2,
a = t.width(),
f = t.height();
if (a == n.width() && a <= i && f == n.height() && f <= u) {
h(t);
return
}
if (a > i || f > u) {
var l = u < f ? u : f,
c = i < a ? i : a;
if (l / f <= c / a) {
t.width(a * l / f);
t.height(l)
} else {
t.width(c);
t.height(f * c / a)
}
}
n.animate({
width: t.width(),
height: t.height(),
marginTop: -(t.height() / 2) - r,
marginLeft: -(t.width() / 2) - r
},
200,
function () {
h(t)
})
}
if (u) u.preventDefault();
var a = e(this),
f = a.attr("href");
if (!f) return;
var l = e(new Image).hide();
e("#zoom .previous, #zoom .next").show();
if (a.hasClass("zoom")) e("#zoom .previous, #zoom .next").hide();
if (!r) {
r = true;
t.show();
e("body").addClass("zoomed")
}
n.html(l).delay(500).addClass("loading");
l.load(c).attr("src", f);
i = a
}
function a() {
var t = i.parent("li").prev();
if (t.length == 0) t = e("#photo_img li:last-child");
t.find("a").trigger("click")
}
function f() {
var t = i.parent("li").next();
if (t.length == 0) t = e("#photo_img li:first-child");
t.children("a").trigger("click")
}
function l(s) {
if (s) s.preventDefault();
r = false;
i = null;
t.hide();
e("body").removeClass("zoomed");
n.empty()
}
function c() {
s = e(window).width();
o = e(window).height()
}
e("body").append('<div id="zoom"><a class="close"></a><a href="#previous" class="previous"></a><a href="#next" class="next"></a><div class="content loading"></div></div>');
var t = e("#zoom").hide(),
n = e("#zoom .content"),
r = false,
i = null,
s = e(window).width(),
o = e(window).height(); (function () {
t.on("click",
function (t) {
t.preventDefault();
if (e(t.target).attr("id") == "zoom") l()
});
e("#zoom .close").on("click", l);
e("#zoom .previous").on("click", a);
e("#zoom .next").on("click", f);
e(document).keydown(function (e) {
if (!i) return;
if (e.which == 38 || e.which == 40) e.preventDefault();
if (e.which == 27) l();
if (e.which == 37 && !i.hasClass("zoom")) a();
if (e.which == 39 && !i.hasClass("zoom")) f()
});
if (e("#photo_img li a").length == 1) e("#photo_img li a")[0].addClass("zoom");
e(".zoom, #photo_img li a").on("click", u)
})(); (function () {
e(window).on("resize", c)
})(); (function () {
e(window).on("mousewheel DOMMouseScroll",
function (e) {
if (!i) return;
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false
})
})()
})(jQuery);#zoom {
z-index: 99990;
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#zoom .content {
z-index: 99991;
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: #ffffff no-repeat 50% 50%;
padding: 0;
margin: -100px 0 0 -100px;
box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
#zoom .content.loading {
background-image: url('../UI/loading.gif');
}
#zoom img {
display: block;
max-width: none;
background: #ececec;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
border-radius: 4px;
}
#zoom .close {
z-index: 99993;
position: absolute;
top: 0;
right: 0;
width: 49px;
height: 49px;
cursor: pointer;
background: transparent url('../UI/close.png') no-repeat 50% 50%;
opacity: 1;
filter: alpha(opacity=100);
border-radius: 0 0 0 4px;
}
#zoom .previous,
#zoom .next {
z-index: 99992;
position: absolute;
top: 50%;
overflow: hidden;
display: block;
width: 49px;
height: 49px;
margin-top: -25px;
}
#zoom .previous {
left: 0;
background: url('../UI/arrows.png') no-repeat 0 0;
border-radius: 0 4px 4px 0;
}
#zoom .next {
right: 0;
background: url('../UI/arrows.png') no-repeat 100% 0;
border-radius: 4px 0 0 4px;
}
#zoom .close:hover {
background-color: #da4f49;
}
#zoom .previous:hover,
#zoom .next:hover {
background-color: #0088cc;
}
#zoom .content 加 border: 0px; 就可以居中了
在IE8我试了下。IE6 8 9 FF都可以
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery zoom相册弹出层插件 - 站长素材</title>
<style type="text/css">
body{overflow-y:scroll;font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;background:#f4f4f4;padding:0;margin:0;}
h1{font-size:31px;line-height:32px;font-weight:normal;margin-bottom:25px;}
a,a:hover{border:none;text-decoration:none;}
img,a img{border:none;}
pre{overflow-x:scroll;background:#ffffff;border:1px solid #cecece;padding:10px;}
.clear{clear:both;}
.zoomed > .container{-webkit-filter:blur(3px);filter:blur(3px);}
.container{width:505px;margin:0 auto;z-index:1;}
.gallery{list-style-type:none;float:left;background:#ffffff;padding:20px 20px 10px 20px;margin:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);box-shadow:0 1px 3px rgba(0,0,0,0.25);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.gallery li{float:left;padding:0 10px 10px 0;}
.gallery li:nth-child(6n){padding-right:0;}
.gallery li a,.gallery li img{float:left;}/*独立的遮罩层*/
#overlayer{
z-index: 10000;
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: #666666;
}#zoom {
z-index: 99990;
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
/*原有的filter定义移除*/
}
#zoom .content {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: #ffffff no-repeat 50% 50%;
padding: 0;
margin: -100px 0 0 -100px;
box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
#zoom .content.loading {
background-image: url('../img/loading.gif');
}
#zoom img {
display: block;
max-width: none;
background: #ececec;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
border-radius: 4px;
}
#zoom .close {
z-index: 99993;
position: absolute;
top: 0;
right: 0;
width: 49px;
height: 49px;
cursor: pointer;
background: transparent url('../img/icons/close.png') no-repeat 50% 50%;
opacity: 1;
filter: alpha(opacity=100);
border-radius: 0 0 0 4px;
}
#zoom .previous,
#zoom .next {
z-index: 99992;
position: absolute;
top: 50%;
overflow: hidden;
display: block;
width: 49px;
height: 49px;
margin-top: -25px;
}
#zoom .previous {
left: 0;
background: url('../img/icons/arrows.png') no-repeat 0 0;
border-radius: 0 4px 4px 0;
}
#zoom .next {
right: 0;
background: url('../img/icons/arrows.png') no-repeat 100% 0;
border-radius: 4px 0 0 4px;
}
#zoom .close:hover {
background-color: #da4f49;
}
#zoom .previous:hover,
#zoom .next:hover {
background-color: #0088cc;
}
</style>
<!--图片弹出层样式 必要样式-->
</head>
<body>
<div class="container">
<h1>ZOOM - jQuery photo gallery plugin</h1>
<ul class="gallery">
<li><a href="../img/gallery/DSC_0008-660x441.jpg"><img src="../img/gallery/DSC_0008-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0014-660x441.jpg"><img src="../img/gallery/DSC_0014-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0019-660x441.jpg"><img src="../img/gallery/DSC_0019-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0061-660x441.jpg"><img src="../img/gallery/DSC_0061-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0063-441x660.jpg"><img src="../img/gallery/DSC_0063-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0090-660x441.jpg"><img src="../img/gallery/DSC_0090-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0091-660x441.jpg"><img src="../img/gallery/DSC_0091-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0161-660x441.jpg"><img src="../img/gallery/DSC_0161-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0163-660x441.jpg"><img src="../img/gallery/DSC_0163-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0187-660x441.jpg"><img src="../img/gallery/DSC_0187-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0220-660x441.jpg"><img src="../img/gallery/DSC_0220-69x69.jpg" /></a></li>
<li><a href="../img/gallery/DSC_0222-660x441.jpg"><img src="../img/gallery/DSC_0222-69x69.jpg" /></a></li>
</ul>
<div class="clear"></div>
</div>
<script type="text/javascript" src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201310/jiaoben1565/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
(function(e) {
function u(u) {
function c() {
function h(e) {
e.show();
n.removeClass("loading")
};
//显示遮罩层，并设置其透明度
e('#overlayer').css('opacity','0.6').show();
var t = e(this),
r = parseInt(n.css("borderLeftWidth")) || 0,//你原有的错误在这里。修正为：取不到值时默认为0
i = s - r * 2,
u = o - r * 2,
a = t.width(),
f = t.height();
if (a == n.width() && a <= i && f == n.height() && f <= u) {
h(t);
return
}
if (a > i || f > u) {
var l = u < f ? u: f,
c = i < a ? i: a;
if (l / f <= c / a) {
t.width(a * l / f);
t.height(l)
} else {
t.width(c);
t.height(f * c / a)
}
};
n.animate({
width: t.width(),
height: t.height(),
marginTop: -(t.height() / 2) - r,
marginLeft: -(t.width() / 2) - r
},
200,
function() {
h(t)
})
}
if (u) u.preventDefault();
var a = e(this),
f = a.attr("href");
if (!f) return;
var l = e(new Image).hide();
e("#zoom .previous, #zoom .next").show();
if (a.hasClass("zoom")) e("#zoom .previous, #zoom .next").hide();
if (!r) {
r = true;
t.show();
e("body").addClass("zoomed")
}
n.html(l).delay(500).addClass("loading");
l.load(c).attr("src", f);
i = a
}
function a() {
var t = i.parent("li").prev();
if (t.length == 0) t = e(".gallery li:last-child");
t.find("a").trigger("click")
}
function f() {
var t = i.parent("li").next();
if (t.length == 0) t = e(".gallery li:first-child");
t.children("a").trigger("click")
}
function l(s) {
if (s) s.preventDefault();
r = false;
i = null;
t.hide();
e("body").removeClass("zoomed");
//关闭时，隐藏遮罩层
e('#overlayer').hide();
n.empty()
}
function c() {
s = e(window).width();
o = e(window).height()
}
//增加了遮罩层<div id="overlayer"></div>的输出
e("body").append('<div id="overlayer"></div><div id="zoom"><a class="close"></a><a href="#previous" class="previous"></a><a href="#next" class="next"></a><div class="content loading"></div></div>');
var t = e("#zoom").hide(),
n = e("#zoom .content"),
r = false,
i = null,
s = e(window).width(),
o = e(window).height(); (function() {
t.on("click",
function(t) {
t.preventDefault();
if (e(t.target).attr("id") == "zoom") l()
});
e("#zoom .close").on("click", l);
e("#zoom .previous").on("click", a);
e("#zoom .next").on("click", f);
e(document).keydown(function(e) {
if (!i) return;
if (e.which == 38 || e.which == 40) e.preventDefault();
if (e.which == 27) l();
if (e.which == 37 && !i.hasClass("zoom")) a();
if (e.which == 39 && !i.hasClass("zoom")) f()
});
if (e(".gallery li a").length == 1) e(".gallery li a")[0].addClass("zoom");
e(".zoom, .gallery li a").on("click", u)
})(); (function() {
e(window).on("resize", c)
})(); (function() {
e(window).on("mousewheel DOMMouseScroll",
function(e) {
if (!i) return;
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false
})
})()
})(jQuery);
</script></body>
</html>
你将上面代码中的批量替换一次:将"../img"替换为:"http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201310/jiaoben1565/img"就是你Demo中原有的图片了
(function(e) {
function u(u) {
function c() {
function h(e) {
e.show();
n.removeClass("loading")
}
var t = e(this),
r = parseInt(n.css("borderLeftWidth")),
i = s - r * 2,
u = o - r * 2,
a = t.width(),
f = t.height();
r=isNaN(r)?0:r;
if (a == n.width() && a <= i && f == n.height() && f <= u) {
h(t);
return
}
if (a > i || f > u) {
var l = u < f ? u: f,
c = i < a ? i: a;
if (l / f <= c / a) {
t.width(a * l / f);
t.height(l)
} else {
t.width(c);
t.height(f * c / a)
}
}
n.animate({
width: t.width(),
height: t.height(),
marginTop: -(t.height() / 2) - r,
marginLeft: -(t.width() / 2) - r
},
200,
function() {
h(t)
})
}
if (u) u.preventDefault();
var a = e(this),
f = a.attr("href");
if (!f) return;
var l = e(new Image).hide();
e("#zoom .previous, #zoom .next").show();
if (a.hasClass("zoom")) e("#zoom .previous, #zoom .next").hide();
if (!r) {
r = true;
t.show();
e("body").addClass("zoomed")
}
n.html(l).delay(500).addClass("loading");
l.load(c).attr("src", f);
i = a
}
function a() {
var t = i.parent("li").prev();
if (t.length == 0) t = e(".gallery li:last-child");
t.find("a").trigger("click")
}
function f() {
var t = i.parent("li").next();
if (t.length == 0) t = e(".gallery li:first-child");
t.children("a").trigger("click")
}
function l(s) {
if (s) s.preventDefault();
r = false;
i = null;
t.hide();
e("body").removeClass("zoomed");
n.empty()
}
function c() {
s = e(window).width();
o = e(window).height()
}
e("body").append('<div id="zoom"><a class="close"></a><a href="#previous" class="previous"></a><a href="#next" class="next"></a><div class="content loading"></div></div>');
var t = e("#zoom").hide(),
n = e("#zoom .content"),
r = false,
i = null,
s = e(window).width(),
o = e(window).height(); (function() {
t.on("click",
function(t) {
t.preventDefault();
if (e(t.target).attr("id") == "zoom") l()
});
e("#zoom .close").on("click", l);
e("#zoom .previous").on("click", a);
e("#zoom .next").on("click", f);
e(document).keydown(function(e) {
if (!i) return;
if (e.which == 38 || e.which == 40) e.preventDefault();
if (e.which == 27) l();
if (e.which == 37 && !i.hasClass("zoom")) a();
if (e.which == 39 && !i.hasClass("zoom")) f()
});
if (e(".gallery li a").length == 1) e(".gallery li a")[0].addClass("zoom");
e(".zoom, .gallery li a").on("click", u)
})(); (function() {
e(window).on("resize", c)
})(); (function() {
e(window).on("mousewheel DOMMouseScroll",
function(e) {
if (!i) return;
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false
})
})()
})(jQuery);// JavaScript Document