0

使用 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) 设置背景颜色?

非常感谢

4

2 回答 2

0

我会使用 jQuery

$('#YourDivid').css("background-color","black");

如果您想更改更多选项而不仅仅是背景颜色,那么您可以这样做

$('#YpurDivId').css({
    "background-color": "black",
    "border": "none"
});
于 2013-10-25T01:07:16.150 回答
0

要更改特定 DIV 标签的背景颜色,只需使用;

background-color:#000000;

例如,这会将其设置为太黑。

于 2013-10-25T00:29:04.067 回答