使用 Scott Robbin 的 PageSlide：http ://srobbin.com/jquery-plugins/pageslide/我正在尝试制作从右到左覆盖整个屏幕的“更多信息”幻灯片。
我得到了我想要的全屏幻灯片，但我希望能够定义每张幻灯片的背景颜色。这是在每张幻灯片通用的#pageslide CSS 中设置的。
HTML：
<head>
<style>
body {
background: #f4f4f4;
font: 14px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: none;
}
a, a:visited { color: #C30; text-decoration: none; border-bottom: 1px dotted #C30; }
a:hover { color: #900; border-bottom-style: solid; }
p { margin-bottom: 20px; }
#content {
width: 940px;
padding: 10px;
margin: 0 auto;
}
#content h1 { color: #333; line-height: 1em; }
#content ul { padding-left: 0; list-style: none; }
#content ul li { margin-bottom: 20px; }
.slide { display: none; }
.slide a { background: #CCC; color: #333; font-weight: bold; padding: 5px 10px; border: none; }
.slide a:hover { background: #aaa; }
pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px 20px; }
#pageslide {
/* These styles MUST be included. Do not change. */
display: none;
position: absolute;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
/* Specify the width of your pageslide here */
width: 100%;
padding: 10px;
/* These styles are optional, and describe how the pageslide will look */
background-color: #a90000;
color: #FFF;
}
</style>
</head>
<body>
<div id="content">
<h1>PageSlide Demo</h1>
<p>Below are a couple of pageslides:</p>
<ul>
<li>
<a href="#modal1" class="slideleft">First Slide. Red Background.</a>
</li>
<li>
<a href="#modal2" class="slideleft">Second Slide. Blue Background.</a>
</li>
<li>
<a href="#modal3" class="slideleft">Third Slide. Green Background.</a>
</li>
</ul>
<div id="modal1" class="slide" style="width:800px; padding:20px; ">
<h2>Slide 1</h2>
<p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p>
<p><a href="javascript:$.pageslide.close()">Close</a></p>
</div>
<div id="modal2" class="slide" style="width:800px; padding:20px; ">
<h2>Slide 2</h2>
<p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p>
<p><a href="javascript:$.pageslide.close()">Close</a></p>
</div>
<div id="modal3" class="slide" style="width:800px; padding:20px; ">
<h2>Slide 3</h2>
<p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p>
<p><a href="javascript:$.pageslide.close()">Close</a></p>
</div>
</div>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.pageslide.min.js"></script>
<script>
/* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
$(".slideleft").pageslide({ direction: "left", modal: true });
</script>
</body>
</html>
JS：
/*
* jQuery pageSlide
* Version 2.0
* http://srobbin.com/jquery-pageslide/
*
* jQuery Javascript plugin which slides a webpage over to reveal an additional interaction pane.
*
* Copyright (c) 2011 Scott Robbin (srobbin.com)
* Dual licensed under the MIT and GPL licenses.
*/
;
(function (b) {
function j(e, a) {
if (0 === e.indexOf("#")) b(e).clone(!0).appendTo(c.empty()).show();
else {
if (a) {
var d = b("<iframe />").attr({
src: e,
frameborder: 0,
hspace: 0
}).css({
width: "100%",
height: "100%"
});
c.html(d)
} else c.load(e);
c.data("localEl", !1)
}
}
function k(b, a) {
var d = c.outerWidth(!0),
f = {}, g = {};
if (!c.is(":visible") && !h) {
h = !0;
switch (b) {
case "left":
c.css({
left: "auto",
right: "-" + d + "px"
});
f["margin-left"] = "-=" + d;
g.right = "+=" + d;
break;
default:
c.css({
left: "-" + d + "px",
right: "auto"
}), f["margin-left"] = "+=" + d, g.left = "+=" + d
}
l.animate(f, a);
c.show().animate(g, a, function () {
h = !1
})
}
}
var l = b("body"),
c = b("#pageslide"),
h = !1,
m;
0 == c.length && (c = b("<div />").attr("id", "pageslide").css("display", "none").appendTo(b("body")));
b.fn.pageslide = function (e) {
this.click(function (a) {
var d = b(this),
f = b.extend({
href: d.attr("href")
}, e);
a.preventDefault();
a.stopPropagation();
c.is(":visible") && d[0] == m ? b.pageslide.close() : (b.pageslide(f), m = d[0])
$('body').css('overflow-y','hidden');
})
};
b.fn.pageslide.defaults = {
speed: 500,
direction: "right",
modal: !1,
iframe: !0,
href: null
};
b.pageslide = function (e) {
var a = b.extend({}, b.fn.pageslide.defaults, e);
c.is(":visible") && c.data("direction") != a.direction ? b.pageslide.close(function () {
j(a.href, a.iframe);
k(a.direction, a.speed)
}) : (j(a.href, a.iframe), c.is(":hidden") && k(a.direction, a.speed));
c.data(a)
};
b.pageslide.close = function (c) {
var a = b("#pageslide"),
d = a.outerWidth(!0),
f = a.data("speed"),
g = {}, i = {};
if (!a.is(":hidden") && !h) {
h = !0;
switch (a.data("direction")) {
case "left":
g["margin-left"] = "+=" + d;
i.right = "-=" + d;
break;
default:
g["margin-left"] = "-=" + d, i.left = "-=" + d
}
a.animate(i, f);
l.animate(g, f, function () {
a.hide();
h = !1;
"undefined" != typeof c && c()
})
$('body').css('overflow-y','scroll');
}
};
c.click(function (b) {
b.stopPropagation()
});
b(document).bind("click keyup", function (e) {
"keyup" == e.type && 27 != e.keyCode || c.is(":visible") && !c.data("modal") && b.pageslide.close()
})
})(jQuery);
有没有办法根据 div id (modal1, modal2, modal3) 设置背景颜色？
非常感谢