放大镜效果+图片点击轮播 2种方法
<!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=utf-8">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>放大镜效果+图片点击轮播 2种方法</title>
<script src="http://i.sfbest.com/com/js/jquery/jquery-1.5.1.min.js?v=20150713" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="youxuan.css">
<body>
<div class="pWrap">
<div class="productIntro">
<div class="pItems">
<div class="pView">
<div id="pView">
<div id="zoom-jpg" class="jqzoom">
<img alt="月盛斋 红烧牛肉 200g" width="330" height="330" src="http://p02.sfbest.com/2014/1800036780/middle_1800036780_1_6.jpg" jqimg="http://p02.sfbest.com/2014/1800036780/original_1800036780_1_6.jpg"/>
</div>
<div id="pic-list">
<a href="javascript:void(0);" class="btn-control" id="btn-forward"><b></b></a>
<a href="javascript:void(0);" class="btn-control" id="btn-backward"><b></b></a>
<div class="pic-items">
<ul>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_6.jpg"></li>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_1.jpg"></li>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_10.jpg"></li>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_2.jpg"></li>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_3.jpg"></li>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_4.jpg"></li>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_5.jpg"></li>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_7.jpg"></li>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_8.jpg"></li>
<li><img title="月盛斋 红烧牛肉 200g " alt="月盛斋 红烧牛肉 200g" src="http://p02.sfbest.com/2014/1800036780/thumb_1800036780_1_9.jpg"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<span class="clear"></span>
</div>
</div>
</div>
<script>
//
$(document).ready(function() {
if($("#brandCon ul li a").length > 6){
var $brands =$("#brandCon ul li a:gt(5)");
$brands.hide();
$("#brandCon").find("b").removeClass().addClass("hide");
$("#brandCon span").addClass("clickShow");
$(".clickShow").toggle(function(){
$brands.show();
$(this).find("b").removeClass().addClass("show");
},function(){
$brands.hide();
$(this).find("b").removeClass().addClass("hide");
})
}
(function(t) {
t.fn.jqueryzoom = function(e) {
var i = {
xzoom: 200,
yzoom: 200,
offset: 10,
position: "right",
lens: 1,
preload: 1
};
e && t.extend(i, e);
var s = "";
t(this).hover(function() {
function e(t) {
this.x = t.pageX, this.y = t.pageY
}
var a = t(this).offset().left,
n = t(this).offset().top,
o = t(this).find("img").get(0).offsetWidth,
r = t(this).find("img").get(0).offsetHeight;
s = t(this).find("img").attr("alt");
var c = t(this).find("img").attr("jqimg");
t(this).find("img").attr("alt", ""), 0 == t("div.zoomdiv").get().length && (t(this).after("<div class='zoomdiv'><img class='bigimg' src='" + c + "'/></div>"), t(this).append("<div class='jqZoomLens'> </div>")), t("div.zoomdiv").width(i.xzoom), t("div.zoomdiv").height(i.yzoom), t("div.zoomdiv").show(), i.lens || t(this).css("cursor", "crosshair"), t(document.body).mousemove(function(s) {
mouse = new e(s);
var c = t(".bigimg").get(0).offsetWidth,
d = t(".bigimg").get(0).offsetHeight,
l = "x",
p = "y";
if (isNaN(p) | isNaN(l)) {
var p = c / o,
l = d / r;
t("div.jqZoomLens").width(i.xzoom / (1 * p)), t("div.jqZoomLens").height(i.yzoom / (1 * l)), i.lens && t("div.jqZoomLens").css("visibility", "visible")
}
xpos = mouse.x - t("div.jqZoomLens").width() / 2 - a, ypos = mouse.y - t("div.jqZoomLens").height() / 2 - n, i.lens && (xpos = a > mouse.x - t("div.jqZoomLens").width() / 2 ? 0 : mouse.x + t("div.jqZoomLens").width() / 2 > o + a ? o - t("div.jqZoomLens").width() : xpos, ypos = n > mouse.y - t("div.jqZoomLens").height() / 2 ? 0 : mouse.y + t("div.jqZoomLens").height() / 2 > r + n ? r - t("div.jqZoomLens").height() : ypos), i.lens && t("div.jqZoomLens").css({
top: ypos,
left: xpos
}), scrolly = ypos, t("div.zoomdiv").get(0).scrollTop = scrolly * l, scrollx = xpos, t("div.zoomdiv").get(0).scrollLeft = scrollx * p
})
}, function() {
t(this).children("img").attr("alt", s), t(document.body).unbind("mousemove"), i.lens && t("div.jqZoomLens").remove(), t("div.zoomdiv").remove()
}), count = 0, i.preload && (t("body").append("<div style='display:none;' class='jqPreload" + count + "'>sfbest</div>"), t(this).each(function() {
var e = t(this).children("img").attr("jqimg"),
i = jQuery("div.jqPreload" + count).html();
jQuery("div.jqPreload" + count).html(i + '<img src="' + e + '">')
}))
}
}(jQuery),$(".jqzoom").jqueryzoom({
xzoom: 500,
yzoom: 330,
offset: 10,
position: "left",
preload: 1,
lens: 1
}),function() {
var t = $("#pic-list li");
t.mouseover(function() {
var e = $(this).find("img"),
i = e.attr("src"),
s = t.index($(this));
$("#pic-list img").removeClass("img-hover"), e.addClass("img-hover");
$("#zoom-jpg img").eq(0).attr({
src: i.replace("thumb", "middle"),
jqimg: i.replace("thumb", "original")
});
})
})();
(function(a) {
a.fn.imgScroll = function(b) {
return this.each(function() {
var e = a.extend({
evtType: "click",
visible: 1,
showControl: true,
direction: "x",
next: ".next",
prev: ".prev",
disableClass: "disabled",
speed: 300,
loop: false,
step: 1,
ie6DisableClass: "disableIE6"
}, b);
var l = a(this),
q = l.find("ul"),
p = q.find("li"),
h = e.width || p.outerWidth(),
d = e.height || p.outerHeight(),
u = p.length,
c = e.visible,
j = e.step,
i = parseInt((u - c) / j),
v = 0,
m = l.css("position") == "absolute" ? "absolute" : "relative",
x = p.css("float") !== "none",
f = e.direction == "x" ? "left" : "top",
k = e.direction == "x",
r = typeof e.prev == "string" ? a(e.prev) : e.prev,
s = typeof e.next == "string" ? a(e.next) : e.next,
w = a.browser.isIE6 ? e.ie6DisableClass : "";
e.loop = false;
function o() {
if (!x) {
p.css("float", "left")
}
q.css({
position: "absolute",
left: 0,
top: 0
});
l.css({
position: m,
width: e.direction == "x" ? c * h : p.outerWidth(),
height: e.direction == "x" ? d : c * d,
overflow: "hidden"
});
r.addClass(e.disableClass + w);
if (e.loop) {} else {
if ((u - c) % j !== 0 && u > c) {
var A = j - (u - c) % j;
q.append(p.slice(0, A).clone());
u = q.find("li").length;
i = parseInt((u - c) / j)
}
}
if (k) {
q.css("width", u * h)
} else {
q.css("height", u * d)
}
if (!e.showControl && u <= c) {
s.hide();
r.hide()
} else {
s.show();
r.show()
}
if (u <= c) {
s.addClass(e.disableClass);
r.addClass(e.disableClass)
} else {
r.addClass(e.disableClass);
s.removeClass(e.disableClass)
}
}
function g(y) {
if (q.is(":animated")) {
return false
}
if (y < 0) {
r.addClass(e.disableClass + w);
return false
}
if (y + c > u) {
s.addClass(e.disableClass);
return false
}
v = y;
q.animate(e.direction == "x" ? {
left: -((y) * h)
} : {
top: -((v) * d)
}, e.speed, function() {
if (y > 0) {
r.removeClass(e.disableClass + w)
} else {
r.addClass(e.disableClass + w)
}
if (y + c < u) {
s.removeClass(e.disableClass)
} else {
s.addClass(e.disableClass)
}
})
}
o();
if (u > c) {
s.click(function() {
g(v + j)
});
r.click(function() {
g(v - j)
})
}
})
}
})(jQuery);
(function() {
$(".pic-items").imgScroll({
visible: 5,
direction: "y",
speed: 200,
step: 1,
loop: !1,
prev: "#btn-forward",
next: "#btn-backward",
disableClass: "disabled"
})
})();
});
</script>
</body>
</html>
css代码
html {_background-image: url(about:blank);_background-attachment: fixed;}
body {color:#666666;font: 12px/150% Arial,Verdana,"宋体";margin: 0;padding:0;}
body {min-width:1200px;}
h1, h2, h3, h4, h5, h6, p, a, em, font, img, strong, b,dl, dt, dd,form, label,ol,ul,li,legend,span,input{margin:0;padding:0;}
ol,ul{list-style:none;}
img{border:0;}
a{text-decoration:none;color:#666666;}
a:hover{text-decoration:none;}
a.red{color:#FA6400;}
.clr{clear:both;display:block;font-size:0;height:0;line-height:0;overflow: hidden;padding:0px;margin:0px;}
.clear{clear:both;padding:0px;font-size:0px;margin:0px;height:0px;line-height:0;overflow:hidden;display:block;}
.clear1{clear:both;height:5px;font-size:0px;margin:0px;padding:0px;line-height:0;overflow:hidden;display:block;}
.clear2{clear:both;height:10px;font-size:0px;margin:0px;padding:0px;line-height:0;overflow:hidden;display:block;}
.fl{float:left;}
.fr{float:right;}
.hide{display:none;}
em{font-style:normal;}
input{outline:none;}
.pWrap{width:1200px;margin:0 auto;}
.productIntro{margin-bottom:10px;}
.pItems{float:left;width:978px;background-color:#fbfbfb;-webkit-box-shadow:0 0 4px #efefef;box-shadow:0 0 4px #c7c7c7;position:relative;z-index:2;}
#carwindow .cartItem li{overflow:hidden;zoom:1;}
#carwindow .cartItem .ct{color:#45403a;font-family:微软雅黑;font-size:18px;margin-bottom:5px;line-height:24px;}
#carwindow .cartItem #showcart{margin-bottom:5px;}
#pView{left:10px;position:absolute;top:20px;width:390px;margin-bottom:20px;}
#pView #pic-list a.disabled {cursor: default;}
#zoom-jpg{height:330px;width:330px;}
#pic-list {height: 300px;overflow: hidden;position: relative;width: 50px;margin-right:10px;_display:inline;float:left;padding:20px 0;}
#pic-list .btn-control {display: block;height: 20px;position: absolute;left:0; width:50px;cursor:pointer;}
#btn-forward {top:0;}
#btn-backward {bottom: 0;}
.btn-control b{top:0;display:block;position:absolute;width:19px;height:15px;left:14px;overflow:hidden;}
#btn-forward b{background:url(image/4.png) no-repeat;}
#btn-backward b{background:url(image/1.png) no-repeat;}
#btn-forward.disabled b{background:url(image/2.png) no-repeat;}
#btn-backward.disabled b{background:url(image/3.png) no-repeat;}
#pic-list .pic-items {left:0;position: absolute;top:20px;}
#pic-list .pic-items li {font-size: 0;position: relative;text-align: center;width:50px;line-height:0;height:60px;}
#pic-list .pic-items img {height: 48px;padding: 1px;width: 48px;}
.jqzoom {padding: 0;position: relative;float:right;}
.zoomdiv {background: url(../images/loading.gif) no-repeat center center #FFFFFF;border: 1px solid #E4E4E4;display: none;height: 410px;left: 400px;overflow: hidden;position: absolute;text-align: center;top: 0;width: 410px;z-index: 8;}
.bigimg {height: 800px;width: 800px;}
.jqZoomLens {background-color:#fff;cursor: move;height: 50px;left: 0;opacity: 0.5;filter:alpha(opacity=50);position: absolute;top: 0;visibility: hidden;width: 50px;z-index:92;}
#pic-list .pic-items img.img-hover {border: 1px solid #69af05;padding: 0;}
#recomm_list {overflow: hidden;padding:0 51px;position: relative;width:900px;height:230px;}
#recomm_list .btn-reco {display: block;height: 230px;position: absolute;top: 0; width: 21px;cursor:pointer;}
#btn_prev {left:15px;}
#btn_next {right:15px;}
.btn-reco b{top:55px;display:block;position:absolute;width:21px;height:39px;}
#btn_prev b{background:url(../images/productinfo.png) no-repeat -173px -130px;}
#btn_next b{background:url(../images/productinfo.png) no-repeat -194px -130px;}
#btn_prev.disabled b{background:url(../images/productinfo.png) no-repeat -215px -130px;}
#btn_next.disabled b{background:url(../images/productinfo.png) no-repeat -236px -130px;}
.p-view li{float:left;width:150px;padding:0 15px;overflow:hidden;}
.p-view .p-img{margin-bottom:5px;}
.p-view .p-img img{width:150px;}
.proRomm .ct{margin-bottom:10px;}
.proRomm .cm{padding:10px 20px;}
.p-view .p-now {color: #BB3221;font-family: “微软雅黑”;margin-right: 5px;}
.p-view .p-now strong {font-size: 20px;font-weight: normal;}
.p-view .p-nor {font-family:“微软雅黑”;text-decoration: line-through;}
.p-view .title-a,.p-view .title-b{line-height:20px;height:20px;overflow:hidden;}
.p-view .title-b{color:#EA5404;}
.p-view .title-c{line-height:20px;height:40px;overflow:hidden;}
第一种方法显示效果
第二种方法
html代码一样 只是css代码和js代码有所改变
js代码
<script>
//
$(document).ready(function() {
if($("#brandCon ul li a").length > 6){
var $brands =$("#brandCon ul li a:gt(5)");
$brands.hide();
$("#brandCon").find("b").removeClass().addClass("hide");
$("#brandCon span").addClass("clickShow");
$(".clickShow").toggle(function(){
$brands.show();
$(this).find("b").removeClass().addClass("show");
},function(){
$brands.hide();
$(this).find("b").removeClass().addClass("hide");
})
}
(function(t) {
t.fn.jqueryzoom = function(e) {
var i = {
xzoom: 200,
yzoom: 200,
offset: 10,
position: "right",
lens: 1,
preload: 1
};
e && t.extend(i, e);
var s = "";
t(this).hover(function() {
function e(t) {
this.x = t.pageX, this.y = t.pageY
}
var a = t(this).offset().left,
n = t(this).offset().top,
o = t(this).find("img").get(0).offsetWidth,
r = t(this).find("img").get(0).offsetHeight;
s = t(this).find("img").attr("alt");
var c = t(this).find("img").attr("jqimg");
t(this).find("img").attr("alt", ""), 0 == t("div.zoomdiv").get().length && (t(this).after("<div class='zoomdiv'><img class='bigimg' src='" + c + "'/></div>"), t(this).append("<div class='jqZoomLens'> </div>")), t("div.zoomdiv").width(i.xzoom), t("div.zoomdiv").height(i.yzoom), t("div.zoomdiv").show(), i.lens || t(this).css("cursor", "crosshair"), t(document.body).mousemove(function(s) {
mouse = new e(s);
var c = t(".bigimg").get(0).offsetWidth,
d = t(".bigimg").get(0).offsetHeight,
l = "x",
p = "y";
if (isNaN(p) | isNaN(l)) {
var p = c / o,
l = d / r;
t("div.jqZoomLens").width(i.xzoom / (1 * p)), t("div.jqZoomLens").height(i.yzoom / (1 * l)), i.lens && t("div.jqZoomLens").css("visibility", "visible")
}
xpos = mouse.x - t("div.jqZoomLens").width() / 2 - a, ypos = mouse.y - t("div.jqZoomLens").height() / 2 - n, i.lens && (xpos = a > mouse.x - t("div.jqZoomLens").width() / 2 ? 0 : mouse.x + t("div.jqZoomLens").width() / 2 > o + a ? o - t("div.jqZoomLens").width() : xpos, ypos = n > mouse.y - t("div.jqZoomLens").height() / 2 ? 0 : mouse.y + t("div.jqZoomLens").height() / 2 > r + n ? r - t("div.jqZoomLens").height() : ypos), i.lens && t("div.jqZoomLens").css({
top: ypos,
left: xpos
}), scrolly = ypos, t("div.zoomdiv").get(0).scrollTop = scrolly * l, scrollx = xpos, t("div.zoomdiv").get(0).scrollLeft = scrollx * p
})
}, function() {
t(this).children("img").attr("alt", s), t(document.body).unbind("mousemove"), i.lens && t("div.jqZoomLens").remove(), t("div.zoomdiv").remove()
}), count = 0, i.preload && (t("body").append("<div style='display:none;' class='jqPreload" + count + "'>sfbest</div>"), t(this).each(function() {
var e = t(this).children("img").attr("jqimg"),
i = jQuery("div.jqPreload" + count).html();
jQuery("div.jqPreload" + count).html(i + '<img src="' + e + '">')
}))
}
}(jQuery),$(".jqzoom").jqueryzoom({
xzoom: 500,
yzoom: 330,
offset: 10,
position: "left",
preload: 1,
lens: 1
}),function() {
var t = $("#pic-list li");
t.mouseover(function() {
var e = $(this).find("img"),
i = e.attr("src"),
s = t.index($(this));
$("#pic-list img").removeClass("img-hover"), e.addClass("img-hover");
$("#zoom-jpg img").eq(0).attr({
src: i.replace("thumb", "middle"),
jqimg: i.replace("thumb", "original")
});
})
})();
(function(a) {
a.fn.imgScroll = function(b) {
return this.each(function() {
var e = a.extend({
evtType: "click",
visible: 1,
showControl: true,
direction: "x",
next: ".next",
prev: ".prev",
disableClass: "disabled",
speed: 300,
loop: false,
step: 1,
ie6DisableClass: "disableIE6"
}, b);
var l = a(this),
q = l.find("ul"),
p = q.find("li"),
h = e.width || p.outerWidth(),
d = 50,
dd=60,
u = p.length,
c = e.visible,
j = e.step,
i = parseInt((u - c) / j),
v = 0,
m = l.css("position") == "absolute" ? "absolute" : "relative",
x = p.css("float") !== "none",
f = e.direction == "x" ? "left" : "top",
k = e.direction == "x",
r = typeof e.prev == "string" ? a(e.prev) : e.prev,
s = typeof e.next == "string" ? a(e.next) : e.next,
w = a.browser.isIE6 ? e.ie6DisableClass : "";
e.loop = false;
function o() {
if (!x) {
p.css("float", "left")
}
l.css({
position: m,
width: e.direction == u * h,
height: e.direction == d,
overflow: "hidden"
});
r.addClass(e.disableClass + w);
if (e.loop) {} else {
if ((u - c) % j !== 0 && u > c) {
var A = j - (u - c) % j;
q.append(p.slice(0, A).clone());
u = q.find("li").length;
i = parseInt((u - c) / j)
}
}
if (k) {
q.css("width", u * h)
} else {
q.css("height", 50)
}
if (!e.showControl && u <= c) {
s.hide();
r.hide()
} else {
s.show();
r.show()
}
if (u <= c) {
s.addClass(e.disableClass);
r.addClass(e.disableClass)
} else {
r.addClass(e.disableClass);
s.removeClass(e.disableClass)
}
}
function g(y) {
if (q.is(":animated")) {
return false
}
if (y < 0) {
r.addClass(e.disableClass + w);
return false
}
if (y + c > u) {
s.addClass(e.disableClass);
return false
}
v = y;
q.animate(e.direction == "x" ? {
top: -((y) * h)
} : {
left: -((v) * dd)
}, e.speed, function() {
if (y > 0) {
r.removeClass(e.disableClass + w)
} else {
r.addClass(e.disableClass + w)
}
if (y + c < u) {
s.removeClass(e.disableClass)
} else {
s.addClass(e.disableClass)
}
})
}
o();
if (u > c) {
s.click(function() {
g(v + j)
});
r.click(function() {
g(v - j)
})
}
})
}
})(jQuery);
(function() {
$(".pic-items").imgScroll({
visible: 5,
direction: "y",
speed: 200,
step: 1,
loop: !1,
prev: "#btn-forward",
next: "#btn-backward",
disableClass: "disabled"
})
})();
});
</script>
css代码
html {_background-image: url(about:blank);_background-attachment: fixed;}
body {color:#666666;font: 12px/150% Arial,Verdana,"宋体";margin: 0;padding:0;}
body {min-width:1200px;}
h1, h2, h3, h4, h5, h6, p, a, em, font, img, strong, b,dl, dt, dd,form, label,ol,ul,li,legend,span,input{margin:0;padding:0;}
ol,ul{list-style:none;}
img{border:0;}
a{text-decoration:none;color:#666666;}
a:hover{text-decoration:none;}
a.red{color:#FA6400;}
.clr{clear:both;display:block;font-size:0;height:0;line-height:0;overflow: hidden;padding:0px;margin:0px;}
.clear{clear:both;padding:0px;font-size:0px;margin:0px;height:0px;line-height:0;overflow:hidden;display:block;}
.clear1{clear:both;height:5px;font-size:0px;margin:0px;padding:0px;line-height:0;overflow:hidden;display:block;}
.clear2{clear:both;height:10px;font-size:0px;margin:0px;padding:0px;line-height:0;overflow:hidden;display:block;}
.fl{float:left;}
.fr{float:right;}
.hide{display:none;}
em{font-style:normal;}
input{outline:none;}
.pWrap{width:1200px;margin:0 auto;}
.productIntro{margin-bottom:10px;}
.pItems{float:left;width:978px;background-color:#fbfbfb;-webkit-box-shadow:0 0 4px #efefef;box-shadow:0 0 4px #c7c7c7;position:relative;z-index:2;}
#carwindow .cartItem li{overflow:hidden;zoom:1;}
#carwindow .cartItem .ct{color:#45403a;font-family:“微软雅黑”;font-size:18px;margin-bottom:5px;line-height:24px;}
#carwindow .cartItem #showcart{margin-bottom:5px;}
#pView{left:10px;position:absolute;top:20px;width:340px;margin-bottom:20px;height: 400px;}
#pView #pic-list a.disabled {cursor: default;}
#zoom-jpg{height:330px;width:330px;}
#pic-list {height:50px;overflow: hidden;position: relative;width: 400px;}
#pic-list .btn-control {display: block;height: 20px;width:25px;cursor:pointer;float: left;margin-top: 20px;}
#btn-forward {top:0;}
#btn-backward {bottom: 0;}
.btn-control b{display:block;width:19px;height:15px;}
#btn-forward b{background:url(image/4.png) no-repeat;}
#btn-backward b{background:url(image/1.png) no-repeat;}
#btn-forward.disabled b{background:url(image/2.png) no-repeat;}
#btn-backward.disabled b{background:url(image/3.png) no-repeat;}
#pic-list .pic-items {float: left;overflow: hidden;position: relative;width: 300px;height: 50px;}
#pic-list .pic-items ul {position: absolute;left: 0px;height: 50px;}
#pic-list .pic-items li {font-size: 0;position: relative;text-align: center;width:50px;line-height:0;height:60px;margin-right: 10px;}
#pic-list .pic-items li:last-child{margin-right: 0px;}
#pic-list .pic-items img {height: 48px;padding: 1px;width: 48px;}
.jqzoom {padding: 0;position: relative;}
.zoomdiv {background: url(../images/loading.gif) no-repeat center center #FFFFFF;border: 1px solid #E4E4E4;display: none;height: 410px;left: 400px;overflow: hidden;position: absolute;text-align: center;top: 0;width: 410px;z-index: 8;}
.bigimg {height: 800px;width: 800px;}
.jqZoomLens {background-color:#fff;cursor: move;height: 50px;left: 0;opacity: 0.5;filter:alpha(opacity=50);position: absolute;top: 0;visibility: hidden;width: 50px;z-index:92;}
#pic-list .pic-items img.img-hover {border: 1px solid #69af05;padding: 0;}
#recomm_list {overflow: hidden;padding:0 51px;position: relative;width:900px;height:230px;}
#recomm_list .btn-reco {display: block;height: 230px;position: absolute;top: 0; width: 21px;cursor:pointer;}
#btn_prev {left:15px;}
#btn_next {right:15px;}
.btn-reco b{top:55px;display:block;position:absolute;width:21px;height:39px;}
#btn_prev b{background:url(../images/productinfo.png) no-repeat -173px -130px;}
#btn_next b{background:url(../images/productinfo.png) no-repeat -194px -130px;}
#btn_prev.disabled b{background:url(../images/productinfo.png) no-repeat -215px -130px;}
#btn_next.disabled b{background:url(../images/productinfo.png) no-repeat -236px -130px;}
.p-view li{float:left;width:150px;padding:0 15px;overflow:hidden;}
.p-view .p-img{margin-bottom:5px;}
.p-view .p-img img{width:150px;}
.proRomm .ct{margin-bottom:10px;}
.proRomm .cm{padding:10px 20px;}
.p-view .p-now {color: #BB3221;font-family: “微软雅黑”;margin-right: 5px;}
.p-view .p-now strong {font-size: 20px;font-weight: normal;}
.p-view .p-nor {font-family: “微软雅黑”;text-decoration: line-through;}
.p-view .title-a,.p-view .title-b{line-height:20px;height:20px;overflow:hidden;}
.p-view .title-b{color:#EA5404;}
.p-view .title-c{line-height:20px;height:40px;overflow:hidden;}
第二种效果显示
